Reactjs 模块 CSS 多个 class 选择器

Question

我正在尝试在单击按钮时在输出容器中实施或添加多个 class。但似乎没有应用样式。下面是我的代码

Layout.module.css

.Content {
    padding-left: 240px;
    min-height: calc(100vh);
    top: 0;
    display: block;
    position: relative;
    padding-top: 80px;
    background: #eee;
    padding-bottom: 60px;
    transition: padding-left 0.2s linear;
}

.Content.collapse {
    padding-left: 100px;
    display: block;
    transition: padding-left 0.2s linear ;
}

现在我像这样在我的导航组件中添加了折叠 class

const layout = (props) => (
    <Aux>        
        <Sidebar collapse={props.collapse} />        
        <div className={`${classes.Content} ${props.collapse ? 'collapse' : ''}`}>
            <TopNavigation toggle={props.toggle}/>
            {props.children}
            <Footer />
        </div>
    </Aux>  
);

所以基本上我只是在检查道具是否倒塌。如果是，那么我将在 class 中添加文本 collapse。现在，当我单击一个按钮时，它会设置 state.collapse = true/false。它能够完成它的工作。现在看来，它不是在读我的 css 风格。下面是在我的DOM

中生成的class

请注意检测到 class .Content 样式。但正如你在这里看到的

Layout_Content__2WLOk collapse div 容器 class 崩溃。所以我认为它应该读取 .Content.collapse 选择器。我在这里遗漏了什么吗？

Answer 1

在 React 中你需要使用关键字 'className' 而不是 'class'

https://reactjs.org/docs/dom-elements.html#classname

此外，如果您想使用 CSS 模块，您需要像这样导入 Layout.module.css 文件

import styles from './Layout.module.css';

您可以像这样添加 CSS 选择器

<div className={styles.Content}></div>

你可以在这里学习这个https://www.w3schools.com/react/react_css.asp

Answer 2

您使用的字符串不是生成的散列

这部分将不起作用

${props.collapse ? 'collapse' : ''}

快速修复

尽量不要链接它。

.collapse {
    padding-left: 100px;
    display: block;
    transition: padding-left 0.2s linear ;
}

并添加

classes.collapse 而不是 collapse

${props.collapse ? classes.collapse : ''}

Answer 3

使用 CSS 模块时，它会为组件的每个实例的每个 class 创建一个唯一的 class 名称。

因此您需要使用导入的 classes 来访问生成的 class 名称，就像您对 .Content

所做的那样

所以

<div className={`${classes.Content} ${props.collapse ? classes.collapse : ''}`}>

Reactjs 模块 CSS 多个 class 选择器

Reactjs Module CSS multiple class selector

reactjs

css-modules

您使用的字符串不是生成的散列

快速修复