自定义团队主题与流利/-反应-北极星

Question

这里可以找到流畅反应-northstar主题的文档。

我很难理解如何使用一个定制的主题。似乎我需要一个团队基础主题的提供者，然后是我自己的主题的嵌套提供者(这很可能是错误的)。

   <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'),
)

给出如下内容：

​

​