Fluent UI React 如何更改导航 link 图标颜色？

Question

我想更改导航 link 图标颜色。如果我通过创建自定义主题来设置原色，它将不会生效。

<ThemeProvider
  theme={{
    palette: {
      themePrimary: getTheme().palette.teal,
    }
  }}
>

实际上它在悬停时有效，但在普通视图中无效。我尝试设置 iconProps 但它也没有用。

links: [
  {
    name: "Overview",
    icon: "WebAppBuilderFragment",
    iconProps: { color: "white" },
  },
],

如何更改这些图标的颜色？

Answer 1

IconProps 是一个跟在 props 后面的对象。使用styles设置图标颜色：

links: [
  {
    name: "Overview",
    iconProps: {
      iconName: 'WebAppBuilderFragment',
      styles: {
        root: { color: '#f00' },
      },
    },
  },
],

Codepen working 示例。

Fluent UI React 如何更改导航 link 图标颜色？

Fluent UI React how to change nav link icon color?

fluent-ui

fluentui-react