next.js scss文件中有几个相同的类,但只返回一个类名

h4cxqtbf  于 2023-08-04  发布在  其他
关注(0)|答案(1)|浏览(77)

如何用相同的类名分隔?: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>

uajslkp6

uajslkp61#

看起来你想在不同的上下文中对同一个类名应用不同的样式。为此,您需要像这样重写logo.module.scss

.left {
  & .column1 {
    & .cell1 {}
    & .cell2 {}
…
.right {
  & .column1 {
    & .cell1 {}
    & .cell2 {}
…

字符串
嵌套本身没有任何作用。您需要使用&选择器,SCSS将其替换为当前选择器,因此上面的代码转换为:

.left {}
.left .column1 {}
.left .column1 .cell1 {}
.left .column1 .cell2 {}
…
.right {}
.right .column1 {}
.right .column1 .cell1 {}
.right .column1 .cell2 {}
…


所以在logo.tsx中,你可以简单地写:

<div className={styles.right}>
      <div className={styles.column1}>
        <div className={styles.cell1}></div>
        <div className={styles.cell2}></div>


CSS后代选择器将完成其工作。
希望这个答案是你需要的!

相关问题