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

IT技术 reactjs office-ui-fabric
2021-05-25 00:29:59

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

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

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

是否有可能更改组件的颜色?

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

谢谢!

2个回答

阅读本文并深入研究 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;
}