Learn how to customize the theme and styles for accordion components, the theme object for accordion components has two main objects:
A. The defaultProps object for setting up the default value for props of accordion components.
B. The styles object for customizing the theme and styles of accordion components.
You can customize the theme and styles of accordion components by adding Tailwind CSS classes as key paired values for objects.
interface AccordionStylesType {
defaultProps: {
icon: node;
className: string;
animate: {
mount: object;
unmount: object;
};
disabled: boolean;
};
styles: {
base: {
container: object;
header: {
initial: object;
active: object;
icon: object;
};
body: object;
disabled: object;
};
};
}import type { AccordionStylesType } from "@material-tailwind/react";const theme = {
accordion: {
styles: {
base: {
container: {
bgColor: "bg-white",
},
},
},
},
};