Replies: 5 comments
-
Currently we are also having same issue. Icons are not matching with designs of our app. Can't change it. Only option is modify every single time. |
Beta Was this translation helpful? Give feedback.
-
Agree with OP. This is insanely prescriptive, which does not feel like Chakra at all. Being able to override those icons / color schemes should not be this difficult. |
Beta Was this translation helpful? Give feedback.
-
This was my workaround for this issue import {
Alert as ChakraAlert,
type AlertProps,
AlertTitle,
AlertDescription,
AlertStatus,
Spinner,
useAlertStyles,
} from '@chakra-ui/react';
import { InfoIcon, MarkCircleIcon, WarningIcon } from '~/components';
const STATUSES = {
info: { icon: InfoIcon, colorScheme: 'blue' },
warning: { icon: WarningIcon, colorScheme: 'yellow' },
success: { icon: MarkCircleIcon, colorScheme: 'green' },
error: { icon: WarningIcon, colorScheme: 'red' },
loading: { icon: Spinner, colorScheme: 'blue' },
};
function getStatusColorScheme(status: AlertStatus) {
return STATUSES[status].colorScheme;
}
export function getStatusIcon(status: AlertStatus) {
return STATUSES[status].icon;
}
const AlertIcon = ({ status }: { status: AlertStatus }) => {
const BaseIcon = getStatusIcon(status);
const styles = useAlertStyles();
const css = status === 'loading' ? styles.spinner : styles.icon;
return <BaseIcon __css={css} />;
};
export default function Alert(props: AlertProps) {
const { status = 'info' } = props;
const colorScheme = props.colorScheme ?? getStatusColorScheme(status);
return (
<ChakraAlert {...props} colorScheme={colorScheme} borderRadius="md">
<AlertIcon status={status} />
{props?.children}
</ChakraAlert>
);
}
export { Alert, AlertIcon, AlertTitle, AlertDescription, type AlertProps }; |
Beta Was this translation helpful? Give feedback.
-
Any update on this ? Is there a way to use a custom icon or to change the styles of AlertIcon's container in the theme ? |
Beta Was this translation helpful? Give feedback.
-
We were able to build a workaround by passing |
Beta Was this translation helpful? Give feedback.
-
Hello! I had to theme the Alert and Toast component recently and encounter some issues with the current API, so I went into the implementation and found some interesting topics to discuss.
In chakra next you can use the children of the AlertIcon component to render your custom Icon, but there is no validation ensuring the provided children is actually an icon, should the AlertIcon component be renamed to something more accurate to the new behavior?
The Toast hook added the
icon
prop to support the new AlertIcon children, but is lacking the colorScheme to fully customize the underlying Alert component. Wouldn't it be better to expose all of the AlertProps in the Toast hook?Finally if you look into the Alert component implementation, you'll notice that under the hook it uses a set of hardcoded values for convenience
There is no way to set those values aside from manually modifying them with the new AlertIcon
children
and the AlertcolorScheme
prop, this makes it completely useless when you don't need those exact values. Could this be part of the Alert theming props so it can be easily reusable?Beta Was this translation helpful? Give feedback.
All reactions