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

时间:2017-08-04 22:54:16

标签: reactjs office-ui-fabric

我正在尝试在我的网络应用中使用Office UI Fabric React components。有没有办法改变组件的颜色或主题?例如,我尝试过这样的事情:

Post

posts是一个定义为红色背景颜色的css类。但实际上并没有改变任何东西。按钮背景颜色仍然是默认的ReactDOM.render( <DefaultButton className='my-button' text='Test Button' />, document.getElementById('root') );

是否可以改变组件的颜色?

[ UPDATE ]理想情况下,我认为我想全局更改组件的主题,以便我的应用可以拥有一致的外观。

谢谢!

2 个答案:

答案 0 :(得分:5)

阅读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部件的正确颜色名称。例如,在上面的代码段中,我们可以看到“neutralPrimary”用于呈现按钮文本,“neutralLighter”用于呈现按钮背景。我不得不阅读source code来解决它们。不确定是否有更简单的方法。

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

但仍然感谢@enjoylife的回复!

答案 1 :(得分:1)

  

是否可以改变组件的颜色?

,您只需要确保您的my-button样式具有更高的特异性,并覆盖所应用的默认值。

如果你使用color: red !important当然有效,但仅用于证明它是可行的。

对于更具可持续性的内容,请定位您的父组件和按钮:

.parent .my-button {
  color: red;
}