Some CSS styles not work on deployment

Hi there !
I made my own program with Create-react-app and used CSS Module for styling.
This is the link of my project: GitHub - sajjadpaknia/dalbi
Some styles disappear when deployed.
Some elements are not styled if they are displayed correctly on local.
Thank you for helping me.

Hi there, glad you found us :wave:t6: : before we can help you, we need a little more information on the issues you are facing.

First, have you looked through this resource? It is a compilation of all of our build and deploy resources. This is a good starting point.

If you have worked through those guides and are still encountering issues please share the following information:

  • the name of your build instance: “
  • what you have already tried
  • any error messages you have received in your terminal window or in the developer console

This is my project :
As you see Header has no styles but that has style in local.
I tried with other deployment sites but the problem wasn’t solved.
My question is why some elements have not any styles when I deploy the project.

can you try opening the local site in dev tools and comparing the classes on the local site vs the live site?

Yes, I did, they are the same, in local It works but in deployment not.

If you run npm run build and view the built site as suggested

The build folder is ready to be deployed.
You may serve it with a static server:

  serve -s build

you’ll see the same thing locally as on Netlify (it isn’t a Netlify issue nor, as you have observed, an issue with any other platform, but the project itself.)

The issue comes down to this:

In dev (i.e. npm start) the <header> is:

<header class="Header_header__mtodi">
<!--other content-->

with the styles

.Header_header__mtodi {
  position: relative;
  width: 100%;
  height: 90px;
  padding-top: 30px;

In production (i.e. npm run build) the <header> is:

<header class="Header_header__mtodi">
<!--other content-->

with the styles

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;

This CSS block is coming from src/CSS/reset.css and is overriding your custom styles.

Exactly how to fix this I have no idea as I use React very little.

this is exactly my issue :face_exhaling: