theming - 使用 fluentui/-react-northstar 自定义团队主题

Question

可以找到 fluentui-react-northstar 主题的文档 here .

我正在努力了解如何使用自定义主题。看来我需要一个用于 Teams 基本主题的提供程序，然后是一个用于我自己的主题的嵌套提供程序(这很可能是错误的)

   <Provider theme={teamsTheme}>
       <Provider theme={myTheme}>

但我只想对基本主题做一些更改，例如将品牌颜色设为红色。该文档并没有真正解释如何使用它。

例如，文档显示:

const theme = {
  siteVariables: {
    brand: 'darkred',
    ...

但这不会改变应用程序中的主要颜色...

如有任何指点，我们将不胜感激。

注意:我本来是去github页面发这个问题的，但是上面说问题应该在这里问

Answer 1

经过反复试验，我发现这是可行的:

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Button, Provider, mergeThemes, teamsTheme } from '@fluentui/react-northstar';

const customTheme = {
    siteVariables: {
      colorScheme: {
        brand: {
          'background': 'darkred',
        }
      }
    }
  }
  
ReactDOM.render(
    <Provider theme={mergeThemes(teamsTheme, customTheme)}>
      <Button primary content="Hello" />
    </Provider>
,
  document.getElementById('app'),
)

给出这个: