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

小编典典

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

reactjs

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

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

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

是否可以更改组件的颜色？

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

谢谢！

阅读 345

2020-07-22

共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的回复！

2020-07-22