Fluent UI React - как применять глобальные стили компонентов с помощью Fluent ThemeProvider

Question

Я работаю с приведенным ниже кодом темы. Я могу применить глобальную тему Fluent с помощью утилиты ThemeProvider и createTheme, но когда я добавляю темы для конкретных компонентов, я не получаю никаких наборов текста, что очень затрудняет их создание.

Итак, мой вопрос : как применить глобальные стили для конкретных компонентов с помощью Fluent ThemeProvider со строгой типизацией.

Если, например, я хотел бы добавить тень блока ко всем Fluent PrimaryButton, я бы не знал, к каким свойствам получить доступ на components

ключ передан в createTheme.

Если вы использовали глобальную тематику компонентов, сообщите мне, какой шаблон вы использовали, и если я на правильном пути, спасибо!

      import { createTheme } from '@fluentui/react';
import { PartialTheme } from '@fluentui/react-theme-provider';

// Trying to add global component styles (not getting typings)
const customComponentStyles = {
    PrimaryButton: {
        styles: {
            root: {
                background: 'red'
            }
        }
    }
};

export const fluentLightTheme: PartialTheme = createTheme({
    components: customComponentStyles, // Want to apply component styles
    palette: {
        themePrimary: '#0078d4',
        themeLighterAlt: '#eff6fc',
        themeLighter: '#deecf9',
        themeLight: '#c7e0f4',
        themeTertiary: '#71afe5',
        themeSecondary: '#2b88d8',
        themeDarkAlt: '#106ebe',
        themeDark: '#005a9e',
        themeDarker: '#004578',
        neutralLighterAlt: '#faf9f8',
        neutralLighter: '#f3f2f1',
        neutralLight: '#edebe9',
        neutralQuaternaryAlt: '#e1dfdd',
        neutralQuaternary: '#d0d0d0',
        neutralTertiaryAlt: '#c8c6c4',
        neutralTertiary: '#a19f9d',
        neutralSecondary: '#605e5c',
        neutralPrimaryAlt: '#3b3a39',
        neutralPrimary: '#323130',
        neutralDark: '#201f1e',
        black: '#000000',
        white: '#ffffff'
    }
});

Answer 1

Проблема здесь в том, что компоненты - это всего лишь Record<string, ComponentStyles>, куда ComponentStyles тогда просто это совершенно неспецифический объект формы { styles?: IStyleFunctionOrObject<any, any>}. Им нужно будет добавить запись для каждого возможного интерфейса в ComponentsStyles, что, я думаю, было бы слишком много работы и чревато ошибками (например, если вы забудете добавить сюда новый компонент ...).

Поскольку все I<Component>Styles интерфейсы экспортируются с помощью Fluent, я всегда определяю стили для каждого компонента отдельно, а затем объединяю их в components объект:

      const buttonStyles: IButtonStyles = {
  root: {
    backgroundColor: 'red'
  }
};

export const fluentLightTheme: PartialTheme = createTheme({
    components: { PrimaryButton: { styles: buttonStyles } },
});

Вот пример кода, который я создал с помощью одного из основных примеров кнопок Fluent UI: https://codepen.io/alex3683/pen/WNjmdWo