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

Question

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

我嵌套了 scss/sass 样式，我试图将它们应用到一个元素上，但是当我将这些多个样式添加到我的元素时，它不采用任何样式，而其他元素只采用一个class 做。生成的 class 名称出现了，但不是实际的样式，只是为了清楚起见

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

Answer 1

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

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

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

Sass modules multiple classes styles changes not being reflected

css

sass

reactjs

sass-modules

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

Sass modules multiple classes styles changes not being reflected

css

sass

reactjs

sass-modules

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