时间戳

首页 > 解决方案 > Fluent UI React - 如何使用 Fluent ThemeProvider 应用全局组件样式

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

问题描述

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

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

例如，如果我想为所有 Fluent PrimaryButtons 添加一个盒子阴影，我将不知道在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'
    }
});

标签： fluent-uifluentui-react

解决方案

这里的问题是， components 只是一个Record<string, ComponentStyles>，ComponentStyles然后 just 是 form 的一个非常不特定的对象{ styles?: IStyleFunctionOrObject<any, any>}。他们必须为每个可能的I<Component>Styles接口添加一个条目ComponentsStyles，我猜这将是太多的工作并且容易出错（例如忘记在这里添加一个新组件......）。

由于所有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

推荐阅读