1

我是新来的反应和反应工具箱。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 文件？

另外，我正在开发一个 web 应用程序，所以 material-ui 对我来说不是一个好的选择。我们有什么更好的方法来增强 react web 应用程序中的 UI 吗？

4

1 回答 1

1

React Toolbox 使用 CSS Modules 来对组件进行内部样式化，我们鼓励您也使用它。react 工具箱中的每个组件都实现了一个类名 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。

于 2016-10-12T23:21:19.107 回答