Learn how to customize the theme and styles for menu components, the theme object for menu components has three main objects:
A. The defaultProps object for setting up the default value for props of menu component.
B. The valid object for customizing the valid values for menu component props.
C. The styles object for customizing the theme and styles of menu component.
You can customize the theme and styles of menu components by adding Tailwind CSS classes as key paired values for objects.
interface MenuStylesType {
defaultProps: {
placement: string;
offset:
| number
| {
mainAxis: number;
crossAxis: number;
alignmentAxis: number;
};
dismiss: {
enabled: boolean;
escapeKey: boolean;
referencePointerDown: boolean;
outsidePointerDown: boolean;
ancestorScroll: boolean;
bubbles: boolean;
};
animate: {
mount: object;
unmount: object;
};
lockScroll: boolean;
};
styles: {
base: {
menu: object;
item: {
initial: object;
disabled: object;
};
};
};
}import type { MenuStylesType } from "@material-tailwind/react";const theme = {
menu: {
styles: {
base: {
menu: {
bg: "bg-white",
p: "p-3",
},
item: {
initial: {
display: "block",
width: "w-full",
},
disabled: {
opacity: "opacity-50",
cursor: "cursor-not-allowed",
},
},
},
},
},
};