Sass 模块的多个类样式更改未反映答案

【问题标题】：Sass modules multiple classes styles changes not being reflectedSass 模块的多个类样式更改未反映
【发布时间】：2022-01-05 00:29:10
【问题描述】：

我以为我了解模块的工作原理，但显然不了解

我有嵌套的 scss/sass 样式，我试图将它们应用于一个元素，但是当我将这些多种样式添加到我的元素时，它不会采用任何样式，而其他只采用一个类的元素则可以。生成的类名出现了，但不是实际的样式，只是为了清楚

scss

.cell {
    width: 22.5%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    position: relative;

    .iconColumn {
        width: 10%;
    }
}

jsx

<div classname={`${styles.cell} ${styles.iconColumn}`}> // this styling doesn't appear
                    <IconButton
                        size="small"
                        onClick={() => setOpen(!open)}>
                        {open ? <KeyboardArrowUpIcon  /> : <KeyboardArrowDownIcon />}
                    </IconButton>
                </div>
                <div className={styles.cell}> // this styling appears
                    <Typography component="div" varient="h3">{row.label}</Typography>
                </div>
// ...

它在网络浏览器中的显示方式

<div classname="NonTablePricingTable_cell__3OzOv NonTablePricingTable_iconColumn__2e9YO"> // the one that doesn't add the styling as per the class

<div class="NonTablePricingTable_cell__3OzOv"> // does add styling as per the class

【问题讨论】：

标签： css reactjs sass sass-modules

【解决方案1】：

className 属性中有错字。应该是驼色的，你用的是小号的。

将classname={`${styles.cell} ${styles.iconColumn}`} 更改为className={`${styles.cell} ${styles.iconColumn}`} 应该可以解决此问题。

【讨论】：

.......谢谢你看到我看不到的真正愚蠢的错误。自动完成给人一种错误的准确感