I have a question about using ReactJS with CSS modules for my front-end project. I want to set up the overall layout, but I understand that CSS modules are scoped only to the components they are imported into. I don’t want my code in the App file to look like this:
// This is a component

Instead, I prefer a seamless structure without additional wrapping divs. For instance, I want the Header component to be positioned in the ‘header’ area of grid-template-areas defined in style. Grid, and I would like this styling to be applied directly within the Header component itself. Previously, I wrapped the Header in a div and styled that div, but I want to avoid using an extra div. I want to apply the styles directly within the Header component.

I tried passing CSS through props from the App to the Header.