将颜色应用于具有特定尺寸的标签 - FluentUI

Question

我正在阅读 UI Fabric React 的文档，我可以看到我们有这些类可以将字体大小应用于我们的标签：https://docs.microsoft.com/en-us/office/dev/add-ins/design/add-in-typography .. 我喜欢“字幕”和“Body”的大小显示为 header，但是本应为 header 的字幕显示为灰色，而 body 为应该是子标签似乎是黑色的。我们如何在做这样的事情时更改默认颜色：

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

Answer 1

您可以通过 Theme 或 Styles 属性更改 Label 颜色：

主题：

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 working example

加法：

如果你想在 ms-font-l 上应用样式，请使用 selectors prop:

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

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

Component styling Wiki

将颜色应用于具有特定尺寸的标签 - FluentUI

Apply colors to labels with specific sizes - FluentUI

office-ui-fabric

fluent-ui

office-ui-fabric-react

fluentui-react