Apply colors to labels with specific sizes - FluentUI

Question

I am reading through the docs for UI Fabric React, and I can see that we have these classes to apply font sizes to our labels: https://learn.microsoft.com/en-us/office/dev/add-ins/design/add-in-typography .. I liked the size of the "Subtitle" and "Body" as a header, however the subtitle that is supposed to be a header appears in grey color and the body which is supposed to be the sub label appears to be black. How do we change the default colors when doing something like this:

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

Marko Savic · Accepted Answer · 2020-11-12T10:25:08.360

You can change Label color through Theme or Styles prop:

Theme:

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

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

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

Styles:

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

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

Codepen working example

Addition:

If you want to apply styles on ms-font-l use selectors prop:

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

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

Component styling Wiki

Apply colors to labels with specific sizes - FluentUI

1 Answers1