office-ui-fabric - 将颜色应用于特定尺寸的标签 - FluentUI

Question

我正在阅读 UI Fabric React 的文档，我可以看到我们有这些类可以将字体大小应用于我们的标签：https ://docs.microsoft.com/en-us/office/dev/add-ins/设计/附加排版..我喜欢“副标题”和“正文”的大小作为标题，但是应该是标题的副标题显示为灰色，正文应该是子标签似乎是黑色的。执行以下操作时如何更改默认颜色：

<Label className="ms-font-l">Hello World</Label>

Answer 1

您可以通过或道具更改Label颜色：ThemeStyles

主题：

import { createTheme } from 'office-ui-fabric-react'

const labelTheme = createTheme({
  palette: {
    neutralPrimary: '#f00',
  },
})

<Label theme={labelTheme} className="ms-font-l">Hello World</Label>

款式：

const labelStyles = { root: { color: '#f00' } };

<Label styles={labelStyles} className="ms-font-l">Hello World</Label>

Codepen 工作示例

添加：

如果你想在 use 属性上应用ms-font-l样式selectors：

const labelStyles = {
  root: {
    selectors: {
      '.ms-font-l': { color: '#f00' },
    },
  },
};

<Label styles={labelStyles} className="ms-font-l">Hello World</Label>

组件样式 Wiki