我正在尝试使用Office UI Fabric React 组件 https://dev.office.com/fabric#/components在我的网络应用程序中。有没有办法改变组件的颜色或主题?例如,我尝试了这样的事情:
ReactDOM.render(
<DefaultButton
className='my-button'
text='Test Button'
/>,
document.getElementById('root')
);
my-button
是一个定义为红色背景颜色的 CSS 类。但实际上并没有改变什么。按钮背景颜色仍然是默认的#f4f4f4
.
是否有可能改变组件的颜色?
[UPDATE] 理想情况下,我想我想全局更改组件的主题,以便我的应用程序可以具有一致的外观和感觉。
Thanks!
看完之后this https://dev.office.com/fabric#/components/themes并深入研究 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
' 用于渲染按钮背景。我必须阅读源代码 https://github.com/OfficeDev/office-ui-fabric-react/tree/master/packages/office-ui-fabric-react/src/components弄清楚它们。不确定是否有更简单的方法。
但请记住,这些更改是全局性的,并将影响依赖这些颜色代码的其他组件。
不过还是感谢@enjoylife的回复!
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)