更改Office UI Fabric React组件的颜色/主题？

Question

我正在尝试在我的Web应用程序中使用Office UI Fabric React组件.有没有办法改变组件的颜色或主题？例如,我尝试过这样的事情:

ReactDOM.render(
  <DefaultButton
    className='my-button'
    text='Test Button'
  />,
  document.getElementById('root')
);

my-button是一个定义为红色背景颜色的CSS类.但实际上并没有改变任何东西.按钮背景颜色仍然是默认颜色#f4f4f4.

是否有可能改变组件的颜色？

[ 更新 ]理想情况下,我认为我想全局更改组件的主题,以便我的应用程序可以具有一致的外观和感觉.

谢谢!

Answer 1

阅读本文并深入了解GitHub上的Office UI Fabric React源代码后,我想我找到了一个解决方案.我想在我最初的问题中,我应该更好地表达我的真实意图.(对不起,我已经更新了问题).我真正想要的是根据某些特定主题全局改变按钮的颜色(和其他组件的颜色),而不是单独改变.

所以我的解决方案是在渲染按钮之前添加以下行:

import { loadTheme } from 'office-ui-fabric-react/lib/Styling';

loadTheme({
  palette: {
    'neutralPrimary': 'yellow',    // Used for button text
    'neutralLighter': 'red',       // Used for button background
  }
});

对于不同的组件,您需要找到用于不同UI部件的正确颜色名称.例如,在上面的代码片段中,我们可以看到' neutralPrimary'用于呈现按钮文本,' neutralLighter'用于呈现按钮背景.我不得不阅读源代码来解决它们.不确定是否有更简单的方法.

但请记住,这些更改是全局的,会影响依赖这些颜色代码的其他组件.

但仍然要感谢@enjoylife的回复!