reactjs - fluentui/react ContexualMenu 项目样式

Question

我正在尝试设置 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)}} />
  }
}

有没有办法一次定义样式及其子组件，而不是通过向每个项目添加样式来改变项目道具？

Answer 1

在 Fluent UI React 中有多种方式来设置组件的样式，选择取决于您的需求和您使用的 Fluent UI 风格。例如，查看有关 Fluent UI Northstar 主题的页面。

对于一组项目，我认为主题上的类或变量都是合适的。