Блог

Главная - Вопросы по программированию - Применение цветов к этикеткам определенных размеров — FluentUI

Применение цветов к этикеткам определенных размеров — FluentUI

#office-ui-fabric #fluent-ui #office-ui-fabric-react #fluentui-react

#office-ui-fabric #fluent-пользовательский интерфейс #office-ui-fabric-реагировать #fluentui-реагировать

Вопрос:

Я читаю документы для UI Fabric React, и я вижу, что у нас есть эти классы для применения размеров шрифта к нашим ярлыкам: https://learn.microsoft.com/en-us/office/dev/add-ins/design/add-in-typography .. Мне понравился размер «субтитров» и «Тела» в качестве заголовка, однако заголовок, который должен быть заголовком, отображается серым цветом, а тело, которое должно быть вложенной меткой, выглядит черным. Как мы можем изменить цвета по умолчанию при выполнении чего-то подобного:

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

Ответ №1:

Вы можете изменить 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

Добавление:

Если вы хотите применить стили к 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>

Вики-стиль компонентов