I'm currently diving into the world of React and Next.js, tackling a project with Next.js. I've set up a global CSS file with a .container style definition which I imported in my _app.js file. However, I'm unsure how to apply this global style to a specific page. In one of my pages, I have a module.css file that I understand how to work with, but there's a div element with the global container class that I can't seem to style properly within that page. Can I define the .container property in the global CSS file or does it only affect global tags like a, img, h1, etc? I'm feeling a bit overwhelmed by the CSS aspect of Next.js.
After figuring out how to pass global CSS to a page that uses module.css, I now find myself stuck with the module CSS.
I've created a component called HeroSection like this :
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 on a page that contains the component and adds props:
<HeroSection
title="Contact Us"
paragraphs={
<>
<div className="para1">
<p> Let's improve this societal project together!</p>
<p>
We value your suggestions, opinions, and comments.
</p>
</div>
<p>
Right here
</p>
</>
}
image="/images/contact.jpg"
/>
In my heroSection.module.css file, I have the following code:
.para1 {
margin-bottom: 44px;
}
As you can see, in the page containing HeroSection, a div has the className "para1" but I'm having trouble applying the CSS styles to it. I tried using className={style.para1} without success. How can I style the div passed as props?