fluentui/react ContextualMenu 项目样式

问题描述

我正在尝试设计 fluentui/react ContextualMenu 组件的样式。到目前为止，我已经能够通过递归修改 IContextualMenuProps items prop - 为每个 IContextualMenuItem 定义 styles 并重复过程来实现我想要的外观对于每个子菜单项。

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)}} />
  }
}

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

解决方法

在 Fluent UI React 中设置组件样式的方法有很多种，选择取决于您的需求和您使用的 Fluent UI 风格。例如查看this page on theming for Fluent UI Northstar。

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