[英]Change the color/theme of Office UI Fabric React components?
我正在尝试在我的Web应用程序中使用Office UI Fabric React组件 。 有没有办法改变组件的颜色或主题? 例如,我尝试过这样的事情:
ReactDOM.render(
<DefaultButton
className='my-button'
text='Test Button'
/>,
document.getElementById('root')
);
my-button
是一个定义为红色背景颜色的css类。 但实际上并没有改变任何东西。 按钮背景颜色仍然是默认的#f4f4f4
。
是否有可能改变组件的颜色?
[ 更新 ]理想情况下,我认为我想全局更改组件的主题,以便我的应用程序可以具有一致的外观和感觉。
谢谢!
在阅读本文并深入了解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的回复!
是否有可能改变组件的颜色?
是的 ,您只需要确保您my-button
样式具有更高的特异性并覆盖应用的默认值。
如果你使用color: red !important
的当然可行,但仅用于证明它是可能的。
要获得更具可持续性的东西,请将您的父组件和按钮定位:
.parent .my-button {
color: red;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.