Sass modules multiple classes styles changes not being reflected-CodePudding

I thought I understood how modules worked but apparently not

I have nested scss/sass styles that I'm trying to apply on an element but when I add those multiple styles to my element it doesn't take any of the styles while other elements that only take one class do. The generated class names are appearing but not the actual styling just to be clear

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>
// ...

how it appears in web browser

<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

CodePudding user response：

You have a typo in className attribute. It should be in camel case and you have used small case.

Changing classname={`${styles.cell} ${styles.iconColumn}`} to className={`${styles.cell} ${styles.iconColumn}`} should fix the issue.