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

问题描述

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

所以我的问题是：我如何使用 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'
    }
});

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

fluent-ui fluentui-react