如何用相同的类名分隔?:S nextjs只生成了一个cloumn 1 end cell 1,cell 2 class等。也许可以解决?:className={styles.left.column1},className={styles.left.column1.cell1},className={styles.right.column1},className={styles.right.column1.cell1}
xy.module.scss
logo {
conatiner {
.left {
.column1 {
.cell1 {}
.cell2 {}
.cell3 {}
etc..
}
.column2 {
.cell1 {}
.cell2 {}
.cell3 {}
etc..
}
etc..
}
.right {
.column1 {
.cell1 {}
.cell2 {}
.cell3 {}
etc..
}
.column2 {
.cell1 {}
.cell2 {}
.cell3 {}
etc..
}
etc..
}
}
}
字符串
logo.tsx
import styles from './logo.module.scss'
<div className={styles.logo}>
<div className={styles.container}>
<div className={styles.left}>
<div className={styles.column1}>
<div className={styles.cell1}></div>
<div className={styles.cell2}></div>
</div>
</div>
<div className={styles.right}>
<div className={styles.????????}>
<div className={styles.???????}></div>
<div className={styles.???????}></div>
</div>
</div>
</div>
</div>
型
1条答案
按热度按时间uajslkp61#
看起来你想在不同的上下文中对同一个类名应用不同的样式。为此,您需要像这样重写
logo.module.scss
:字符串
嵌套本身没有任何作用。您需要使用
&
选择器,SCSS将其替换为当前选择器,因此上面的代码转换为:型
所以在
logo.tsx
中,你可以简单地写:型
CSS后代选择器将完成其工作。
希望这个答案是你需要的!