如何使用SASS和CSS模块制作组成的班级名称样式
我有一个下一个项目。JS项目，我正在使用SCSS/SASS进行样式研究。我试图找出简化班级名称样式的最佳方法。
因此，现在我遇到了以下问题：
我有一个类似的组件：
import styles from './component.module.scss';
const Component = () => {
return (
<div className={styles.container}>
<div className='content'>
...
</div>
</div>
);
}
我想制作一个简单的.scs，例如：
.container {
background-color: red;
.content {
background-color: blue;
}
}
类.container效果很好。但是，要能够应用.content我将不得不将第二个Div的className更改为{styles.content}，而不仅仅是content。
有没有一种方法可以使用styles.class仅在组件的顶部div中，而不必为每个孩子的div使用它？
I have a Next.js project and I'm studying using SCSS/SASS for styling. I'm trying to figure out the best way to simplify the class name styling.
So right now I'm having the following problem:
I have a component like:
import styles from './component.module.scss';
const Component = () => {
return (
<div className={styles.container}>
<div className='content'>
...
</div>
</div>
);
}
I would like to make a simple .scss like:
.container {
background-color: red;
.content {
background-color: blue;
}
}
The class .container works well. But to be able to apply .content I would have to change the 2nd div's classname to {styles.content} instead of just content.
Is there a way to use styles.CLASS only in the top div of the component and not have to use it for every children's div?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
您可以在app.js中添加全局样式表，并在任何地方使用它：
或模块样式表格，然后使用它，只有
在您需要的情况下，只有在您导入的文件中使用它：
您需要创建2个样式图
You can Add a Global Stylesheet to app.js, and use it like that everywhere:
or a module Stylesheet, and use it like that, only in files you imported it
if you want it like that:
you need to create 2 Stylesheets