Learn how to customize the theme and styles for alert component, the theme object for alert component has three main objects:
A. The defaultProps object for setting up the default value for props of alert component.
B. The valid object for customizing the valid values for alert component props.
C. The styles object for customizing the theme and styles of alert component.
You can customize the theme and styles of alert component by adding Tailwind CSS classes as key paired values for objects.
interface AlertStylesType {
defaultProps: {
variant: string;
color: string;
icon: node;
show: boolean;
dismissble: {
action: node;
onClose: func;
};
animate: {
mount: object;
unmount: object;
};
className: string;
};
valid: {
variants: string[];
colors: string[];
};
styles: {
base: object;
variants: {
filled: object;
gradient: object;
};
};
}import { AlertStylesType } from "@material-tailwind/react";const theme = {
alert: {
styles: {
variants: {
filled: {
blue: {
backgroud: "bg-blue-500",
color: "text-white",
},
},
gradient: {
blue: {
backgroud: "bg-gradient-to-tr from-blue-600 to-blue-400",
color: "text-white",
},
},
},
},
},
};