React 全局 SCSS：class 样式不起作用

Question

我正在使用 SASS 的 React。

对于我的组件，我使用模块化 CSS，但是，在我的 Layout.js 文件中，我想使用 main.scss 文件。

我的 main.scss 文件在我向 body {} 或 p {} 等选择器添加样式时正常工作，它们会为这些元素设置样式。类的样式似乎没有通过。例如，在我的 global.scss 文件中，我有以下 css

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;

这可能是什么问题？

Answer 1

您在使用 css 模块吗？

在这种情况下，css-modules 在 class 名称的末尾添加一个散列。您可以通过切换到 class.

的全局范围来避免它

:global {
  .marginsContainer {
    width: 90%;
    margin: auto;
    padding: 100px;
  }
}

更好的解决方案是通过像这样导入样式表，将 class 名称与散列一起使用。

import styles from '../global-styles/main.scss';

并像这样设置 class 名称。

<div className={styles.marginsContainer}>

React 全局 SCSS：class 样式不起作用

React global SCSS: class styling not working

css

sass

selector

reactjs

next.js