Fluent UI React - 如何使用 Fluent ThemeProvider 应用全局组件样式答案

【问题标题】：Fluent UI React - how to apply global component styles with Fluent ThemeProviderFluent UI React - 如何使用 Fluent ThemeProvider 应用全局组件样式
【发布时间】：2021-02-09 20:00:59
【问题描述】：

我正在使用下面的主题代码。我可以使用 ThemeProvider 和 createTheme 实用程序应用全局 Fluent 主题，但是当我添加特定于组件的主题时，我没有得到任何类型，这使得主题化变得非常困难。

所以我的问题是：如何使用具有强类型的 Fluent ThemeProvider 应用全局组件特定样式。

例如，如果我想为所有 Fluent PrimaryButtons 添加一个盒子阴影，我将不知道在传递给 createTheme 的 components 键上要访问哪些属性。

如果您做过任何全局组件主题，请告诉我您使用的模式以及我是否走在正确的轨道上，谢谢！

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'
    }
});

【问题讨论】：

你能解决这个问题吗？你能分享你的解决方案或你最终做了什么吗？

标签： fluent-ui fluentui-react

【解决方案1】：

这里的问题是，组件只是Record<string, ComponentStyles>，而ComponentStyles 只是{ styles?: IStyleFunctionOrObject<any, any>} 形式的非常不特定的对象。他们必须为ComponentsStyles 的每个可能的I<Component>Styles 接口添加一个条目，我想这会工作量太大且容易出错（例如忘记在此处添加新组件......）。

由于所有I<Component>Styles 接口都是由Fluent 导出的，所以我总是分别为每个组件定义样式，然后将它们合并到components 对象中：

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

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

这是我使用 Fluent UI 基本按钮示例之一创建的 codepen 示例：https://codepen.io/alex3683/pen/WNjmdWo

【讨论】：