如何将主题应用于来自反应工具箱的组件

我是新来对工具箱做出反应和反应的。 React工具箱使用scss。我不知道如何面对与其组件定制问题。如何将主题应用于来自反应工具箱的组件

这是我有：

<AppBar fixed flat title="Webocity" className="appBar"> 
    <Navigation type='horizontal' className="navbar" routes={linkroutes}> 
     </Navigation> 
    </AppBar>

用它导航组件的appbar组件。

我试着将CSS类appbar部件，它的工作。

然而，类名的导航组件不能正常工作，并想知道为什么。为什么它为AppBar工作，而不是Navigation？另外，对于appBar CSS，背景特性被忽略，但不是高度特性。这是为什么？

另外，如何将主题传递给这些组件？我知道这需要写在SCSS文件中。但我能得到它可能是一个非常简单的例子吗？

文档显示：

import theme from './PurpleAppBar.scss'; 

const PurpleAppBar = (props) => (
    <AppBar {...props} theme={theme} /> 
); 

export default PurpleAppBar;

但什么是PurpleAppBar.scss，应该怎么样子呢？我相信这是一个自定义的SCSS文件？

另外，我工作的一个Web应用程序，从而材料的UI听起来是不是很好的选择，me.Do我们有什么更好的增强用户界面的反应web应用程序？

来源

2016-09-26 gags

阵营工具箱使用CSS模块内部风格组件，我们建议您使用它。反应工具箱中的每个组件实现一个classNames的API，这些API根据状态分配给每个DOM节点。你可以在文档中看到API。

的theme属性是实现该API的className与最终类和类名之间的匹配的形状。假设你有一个CSS模块

.button { 
    background-color: red 
}

那得到像{ button: 'MyButton--button__1262a' }对象解决。您可以将该对象赋予该组件，以便它将获得按钮className并将其设置到相应的节点中。谨防选择优先。有时你需要提高优先级，你只需要在自定义组件的根目录下添加一个className即可。文档中有很多示例，您也可以查看示例回购。

如果你不想使用CSS模块仍然可以实现主题化硬编码模块。例如，如果你想在你的css中写一个.awesome-button类，你可以传递一个主题对象来告诉：{ button: "awesome-button" }。欲了解更多信息，请看react-css-themr。

来源

2016-10-12 23:21:19 javivelasco

如何将主题应用于来自反应工具箱的组件

回答

相关问题