Question

我是新手，对工具箱做出反应和反应。 React工具箱使用scss。我还不知道scss，因此面临组件定制问题。

这就是我所拥有的：

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

包含导航组件的appbar组件。

我尝试将css类应用于appbar组件，但它确实有用。

但是，导航组件上的className不起作用，并且想知道原因。为什么它适用于AppBar而不是Navigation？另外，对于appBar css，背景属性被覆盖但不是高度属性。那是为什么？

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

文档显示：

import theme from './PurpleAppBar.scss';

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

export default PurpleAppBar;

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

此外，我正在开发一个网络应用程序，所以材料 - 对我来说听起来不是一个好选择。我们有什么更好的方法来增强反应网络应用程序的用户界面吗？

Answer 1

React Toolbox使用CSS模块在内部设置组件样式，我们也鼓励您使用它。 react工具箱中的每个组件都实现了一个classNames API，根据状态分配给每个DOM节点。您可以在文档中看到API。

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

.button {
  background-color: red
}

在{ button: 'MyButton--button__1262a' }之类的对象中得到解决。您可以将该对象提供给组件，以便获取按钮className并将其设置为相应的节点。注意选择器优先级。有时您需要提升优先级，您只需将className添加到自定义组件的根目录即可。文档中有很多示例，您也可以查看示例repo。

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

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

1 个答案: