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

Question

fluentui-react-northstar 主题的文档可以在这里找到。

我正在努力了解如何使用自定义主题。似乎我需要一个用于 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'),
)

给出了这个：