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

问题描述

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

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

解决方法

您可以通过Label或Theme道具来更改Styles的颜色：

主题：

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属性：

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

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

Component styling Wiki