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

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

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

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

是否有可能改变组件的颜色？

[UPDATE]理想情况下，我想我想在全球范围内更改组件的主题，以便我的应用可以具有一致的外观和感觉。

谢谢！

来源

2017-08-04 Yutao Huang

阅读this和挖掘到Office UI面料阵营在GitHub上的源代码后，我想我已经找到了解决办法。我想我应该在我最初的问题中更好地表达我的真实意图。（对不起，我已经更新了这个问题）。我真正想要的是基于某些特定主题来全局改变按钮的颜色（以及其他组件的颜色），而不是单独更改。

所以我的解决办法是渲染按钮之前，添加以下行：

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

来源

2017-08-05 09:13:50

是否有可能改变组件的颜色？

是，你只需要确保你的my-button款式有较高的特异性，将覆盖应用的默认值。

如果您使用color: red !important，当然可以，但仅用于证明这是可行的。

对于一些更可持续的，针对你的父组件加上您的按钮：

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

来源

2017-08-05 00:48:29 enjoylife

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

回答

相关问题