next.js 我不知道如何将全局 .container css 样式应用到其他页面

Question

我是新来的反应 next.js
我正在尝试用 next.js
做一个项目我有一个具有 .container 样式属性的全局 css，我将其导入到我的 _app.js 文件中。
但是我不知道如何在页面中导入它。
我有一个带有导入 module.css 的页面，我知道但是在这个页面中有一个 div 和全局容器 class 我不知道如何传递 css 属性.
是否可以在全局 css 中编写 .container 属性或者它是否只适用于全局标签，如 a、img、h1 等？
我对 Next.
中的 css 有点迷茫

我想我已经弄清楚如何将全局 css 传递给包含 module.css 的页面，但我知道我受困于模块 css.

我创建了一个像这样的强大的 HeroSection :

import React from "react";
import style from "./heroSection.module.css";

function HeroSection({ title, paragraphs, image }) {
  return (
    <div className={style.heroSection}>
      <div className={style.text}>
        <h1>{title}</h1>
        <div className={style.paragraphes}>{paragraphs}</div>
      </div>
      <img src={image} alt="" />
    </div>
  );
}

export default HeroSection;

一个包含组件并添加道具的页面：

            <HeroSection
              title="Nous contacter"
              paragraphs={
                <>
                  <div className="para1">
                    <p> Améliorons ensemble ce projet de société !</p>
                    <p>
                      Nous sommes à l’écoute de tes suggestions, avis et
                      commentaires.
                    </p>
                  </div>
                  <p>
                    C’est juste ici
                  </p>
                </>
              }
              image="/images/contact.jpg"
            />

在我的 heroSection.module.css 我有这个代码 :

.para1 {
  margin-bottom: 44px;
}

如您在包含 heroSection 的页面中所见，div 具有 class 名称“para1”，但我无法在其上应用 css。我尝试 className={style.para1} 但没有成功。如何设置作为道具传递的 div 的样式？

Answer 1

您需要在使用 <HeroSection> 组件的页面中导入 CSS 文件。

import style from "<relative-path-to-heroSection.module.css>";

然后将适当的class传递给更下方的<div>。

<HeroSection
    title="Nous contacter"
    paragraphs={
        <>
            <div className={style.para1}>
                <p> Améliorons ensemble ce projet de société !</p>
                <p>
                    Nous sommes à l’écoute de tes suggestions, avis et
                    commentaires.
                </p>
            </div>
            <p>C’est juste ici</p>
        </>
    }
    image="/images/contact.jpg"
/>

next.js 我不知道如何将全局 .container css 样式应用到其他页面

next.js I don't know how to apply global .container css style to other pages

css

global

reactjs

next.js