Ind*_*gns 2 css sass selector reactjs next.js
我正在使用 React 和 SASS。
对于我的组件，我使用模块化 CSS，但是，在我的Layout.js文件中，我想使用一个main.scss文件。
当我向选择器（例如或 ）main.scss添加样式时，我的文件正在工作，它们对这些元素进行样式设置。这是似乎没有实现的类的样式。例如，在我的文件中，我有以下 cssbody {}p {}global.scss
body {
margin: 0;
}
.marginsContainer {
width: 90%;
margin: auto;
padding: 100px;
}
正在body工作。事实.mainContainer并非如此。
我正在尝试在 Layout.js 文件中使用 .mainContainer，如下所示
import Navbar from './Navbar';
import Head from 'next/head';
import '../global-styles/main.scss';
const Layout = (props) => (
<div>
<Head>
<title>Practise Site</title>
</Head>
<Navbar />
<div className="marginsContainer">
{props.children}
</div>
</div>
);
export default Layout;
这里可能有什么问题？
小智 5
你使用CSS模块吗？
在这种情况下，css-modules 在类名末尾添加一个哈希值。您可以通过切换到类的全局范围来避免这种情况。
:global {
.marginsContainer {
width: 90%;
margin: auto;
padding: 100px;
}
}
更好的解决方案是通过像这样导入样式表来使用带有哈希的类名。
import styles from '../global-styles/main.scss';
并像这样设置类名。
<div className={styles.marginsContainer}>