我正在尝试在我的网络应用程序中使用 Office UI Fabric React components。有没有办法改变组件的颜色或主题？例如，我尝试过这样的事情：
ReactDOM.render(
<DefaultButton
className='my-button'
text='Test Button'
/>,
document.getElementById('root')
);
my-button 是一个定义为红色背景颜色的 CSS 类。但实际上并没有改变什么。按钮背景颜色还是默认的#f4f4f4。
是否可以改变组件的颜色？
[更新] 理想情况下，我想我想全局更改组件的主题，以便我的应用可以具有一致的外观和感觉。
谢谢！
【问题讨论】：
在阅读this 并深入研究 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 部分的正确颜色名称。例如，在上面的代码 sn-p 中，我们可以看到“neutralPrimary”用于渲染按钮文本，“neutralLighter”用于渲染按钮背景。我必须阅读source code 才能弄清楚。不确定是否有更简单的方法。
但请记住，这些更改是全局性的，并且会影响依赖这些颜色代码的其他组件。
但仍然感谢@enjoylife 的回复！
【讨论】：
是否可以改变组件的颜色？
是的，您只需要确保您的 my-button 样式具有更高的特异性，并将覆盖应用的默认值。
如果您使用color: red !important，那当然可以，但只是为了证明这是可能的。
为了更可持续，定位你的父组件和你的按钮：
.parent .my-button {
color: red;
}
【讨论】：