更改 Office UI Fabric React 组件的 color/theme？

Question

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

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

my-button 是 css class 定义为红色背景色。但实际上并没有改变什么。按钮背景颜色仍然是默认的#f4f4f4.

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

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

谢谢！

Answer 1

Is it possible at all to change the colors of the components?

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

如果您使用 color: red !important 那当然可以，但只是为了证明它是可能的。

要获得更可持续的东西，请将您的父组件和您的按钮作为目标：

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

Answer 2

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

更改 Office UI Fabric React 组件的 color/theme？

Change the color/theme of Office UI Fabric React components?

reactjs

office-ui-fabric