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

【问题标题】：Custom Teams theming with fluentui/-react-northstar使用 fluentui/-react-northstar 自定义团队主题
【发布时间】：2021-03-03 01:55:13
【问题描述】：

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

我很难理解如何使用自定义主题。看来我需要一个用于 Teams 基本主题的提供程序，然后为我自己的主题提供一个嵌套的提供程序（这很可能是错误的）

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

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

例如，文档显示：


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

但这不会改变应用程序中的原色...

任何指针将不胜感激。

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

【问题讨论】：

我遇到了同样的问题。你有什么办法吗？

标签： theming fluentui-react

【解决方案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'),
)

给出这个：

【讨论】：