我正在使用下面的主题代码。我可以使用 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'
}
});