我正在尝试设置 fluentui/react ContextualMenu 组件的样式。到目前为止,我已经能够通过递归修改IContextualMenuProps 项目道具来实现我想要的外观 -为每个IContextualMenuItem定义样式并为每个子菜单项重复过程。
import { ContextualMenu, IContextualMenuProps, IContextualMenuItem } from '@fluentui/react';
export class StyledContextualMenu<IContextualMenuProps, {}>{
setItemStyle = (items: IContextualMenuItem[])=> {
return items.map(item => {
item.itemProps.styles = {...};
if (item.subMenuProps && item.subMenuProps.items)
item.subMenuProps.items = this.setItemStyle(item.subMenuProps.items)
return item;
})
}
render() {
const { items, ...rest } = this.props;
return <ContextualMenu {...rest} items={this.setItemsStyle(items)}} />
}
}
有没有办法一次定义样式及其子组件,而不是通过向每个项目添加样式来改变项目道具?