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โ