css - 如何将主题应用到 React 工具箱中的组件

Question

我是 React 和 React 工具箱的新手。 React 工具箱使用 scss。我还不了解 scss，因此面临着自定义其组件的问题。

这是我的:

  <AppBar fixed flat title="Webocity" className="appBar">
    <Navigation type='horizontal' className="navbar" routes={linkroutes}>
      </Navigation>
  </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 文件？

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

Answer 1

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

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

.button {
  background-color: red
}

这在像 { button: 'MyButton--button__1262a' } 这样的对象中得到解决。您可以将该对象提供给组件，以便它获得按钮类名并将其设置到相应的节点中。当心选择器优先级。有时您需要提高优先级，只需将 className 添加到自定义组件的根即可。文档中有很多示例，您也可以查看示例存储库。

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