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

Question

I'm new to react and next.js
I'm trying to do a projetct with next.js
I have a global css with a .container style properties and I imported it in my _app.js file.
But I don't know how to import it in a page.
I have a page with a import module.css and I understood that but in this page there is a div with the global container class and I don't know how to pass the css property.
Is it possible to write .container property in the global css or does it just work with global tags like a, img, h1, etc ?
I'm a little lost with the css in Next.

I think I've worked out how to pass global css to a page whitch contain module.css but know I'm stuck with the module css.

I've created a compotent HeroSection like that :

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;

And a page whith contains the component and adds props :

            <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"
            />

In my heroSection.module.css I have this code :

.para1 {
  margin-bottom: 44px;
}

As you see in the page containing the heroSection a div has the className "para1" but I am unable to apply the css on it. I tried className={style.para1} without success. How can I style the div passed as props ?

juliomalves juliomalves · Accepted Answer · 2021-01-12T09:43:18

You need to import to CSS file in the page where you use the <HeroSection> component.

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

Then pass the appropriate class to the <div> further down.

<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 I don't know how to apply global .container css style to other pages

1 Answers