英文:
There are several identical classes in the .module.scss file, but only one classname is returned
问题
如何使用相同的类名进行分离？ :S
Next.js 生成了只有一个 column1 结尾的 cell1、cell2 等类...
也许可以解决？?: className={styles.left.column1}, className={styles.left.column1.cell1}, className={styles.right.column1}, className={styles.right.column1.cell1}
xy.module.scss
.logo {
container {
.left {
.column1 {
.cell1 {}
.cell2 {}
.cell3 {}
等等..
}
.column2 {
.cell1 {}
.cell2 {}
.cell3 {}
等等..
}
等等..
}
.right {
.column1 {
.cell1 {}
.cell2 {}
.cell3 {}
等等..
}
.column2 {
.cell1 {}
.cell2 {}
.cell3 {}
等等..
}
等等..
}
}
}
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>
注意：在 logo.tsx 中，你需要替换 "????????" 部分为正确的类名，以便分离相同的类名。
英文:
how to separate with the same class name? :S
nextjs generated only one cloumn1 end cell1, cell2 class etc..
maybe it could be solved??: 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
得分: 1
看起来你想在相同的类名中的不同上下文中应用不同的样式。为此，你需要像这样重写 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>
</div>
</div>
CSS 后代选择器会起作用。
希望这个回答对你有帮助！
英文:
It looks like you want to apply different styles in different contexts to the same classname. For that, you need to rewrite logo.module.scss like this:
.left {
& .column1 {
& .cell1 {}
& .cell2 {}
…
.right {
& .column1 {
& .cell1 {}
& .cell2 {}
…
Nesting by itself does nothing. You need to use the & selector, which SCSS substitutes with the current selector, so the code above transpiles to:
.left {}
.left .column1 {}
.left .column1 .cell1 {}
.left .column1 .cell2 {}
…
.right {}
.right .column1 {}
.right .column1 .cell1 {}
.right .column1 .cell2 {}
…
So in logo.tsx you can simply write:
<div className={styles.right}>
<div className={styles.column1}>
<div className={styles.cell1}></div>
<div className={styles.cell2}></div>
And CSS descendant selector will do its job.
Hopefully this answer is what you need!
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论