Menu Item Styles
The menuItemStyles prop allows you to customize the style of the menu items.
Propsโ
type MenuItemStyles = {
root?: ElementStyles;
button?: ElementStyles;
label?: ElementStyles;
prefix?: ElementStyles;
suffix?: ElementStyles;
icon?: ElementStyles;
subMenuContent?: ElementStyles;
subMenuExpandIcon?: ElementStyles;
};
type ElementStyles =
| CSSObject
| ((params: MenuItemStylesParams) => CSSObject | undefined);
type MenuItemStylesParams = {
level: number;
disabled: boolean;
active?: boolean;
isSubmenu: boolean;
open?: boolean;
};
The MenuItemStyles object allows you to customize the style of various elements within the menu item. Each property corresponds to a specific element and accepts a CSSObject that contains the styles.
| Property | Description |
|---|---|
| root | The root element of all the menu-items and submenus. |
| button | The button element of all the menu-items and submenus. |
| label | The label element of all the menu-items and submenus. |
| prefix | The prefix element of all the menu-items and submenus. |
| suffix | The suffix element of all the menu-items and submenus. |
| icon | The icon element of all the menu-items and submenus. |
| subMenuContent | The content of sub menu element of all the submenus. |
| subMenuExpandIcon | The expand icon of sub menu element of all the submenus. |
The MenuItemStylesParams object contains the following properties:
| Property | Description |
|---|---|
| level | The depth level of the menu item. |
| disabled | Whether the menu item is disabled. |
| active | Whether the menu item is active. |
| isSubmenu | Whether the menu item is a submenu. |
| open | Whether the submenu associated with the menu item is open or closed. |
You can customize these styles by providing a CSSObject with appropriate style properties.
With Parameterโ
The menuItemStyles prop takes a MenuItemStylesParams object as a parameter. This allows you to apply styles based on different conditions.
By using the MenuItemStylesParams object, you can dynamically apply styles based on the provided parameters.
Exampleโ
Source Codeโ
Without Parameterโ
The menuItemStyles prop directly returns a CSSObject without any parameters.
Exampleโ
Source Codeโ