我是 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 吗?
最佳答案
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 .
关于css - 如何将主题应用到 React 工具箱中的组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39704323/