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

Posted 2023-03-07

【中文标题】next.js 我不知道如何将全局 .container css 样式应用到其他页面

【英文标题】：next.js I don't know how to apply global .container css style to other pages

【发布时间】：2021-04-16 06:26:43

【问题描述】：

我是新来的 react 和 next.js 我正在尝试用 next.js 做一个项目 我有一个具有 .container 样式属性的全局 css，并将其导入到我的 _app.js 文件中。 但我不知道如何在页面中导入它。 我有一个带有 import module.css 的页面，我明白这一点，但是在这个页面中有一个带有全局容器类的 div，我不知道如何传递 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  />
    </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 的 className 为“para1”，但我无法在其上应用 css。 我试过 className=style.para1 没有成功。 如何设置作为道具传递的 div 的样式？

【问题讨论】：

我已经用代码编辑了我的帖子。

【参考方案1】：

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

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

然后将适当的类传递给更下方的<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"
/>