Блог

Я думал, что понимаю, как работают модули, но, по-видимому, нет

У меня есть вложенные стили scss/sass, которые я пытаюсь применить к элементу, но когда я добавляю эти несколько стилей в свой элемент, он не использует ни один из стилей, в то время как другие элементы, которые используют только один класс, делают это. Появляются сгенерированные имена классов, но не фактический стиль, просто чтобы было понятно

scss

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

jsx

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

как это отображается в веб-браузере

 lt;div classname="NonTablePricingTable_cell__3OzOv NonTablePricingTable_iconColumn__2e9YO"gt; // the one that doesn't add the styling as per the class  lt;div class="NonTablePricingTable_cell__3OzOv"gt; // does add styling as per the class   

У вас опечатка в className атрибуте. Это должно быть в случае верблюда, и вы использовали небольшой футляр.

Изменение classname={`${styles.cell} ${styles.iconColumn}`} на className={`${styles.cell} ${styles.iconColumn}`} должно устранить проблему.