How to make CSS grid working in react with CSS modules stylesheet

Question

We have a css file with grid defined and it was working fine previously. Recently we are trying to use CSS module and changed the file name from sonar-landing-page.css to sonar-landing-page.module.css and import it in the js file like the code sample below then it stopped working, the css module itself seems to be working fine as we added a simple .error style like the one below and the red color is showing correctly but it is just the grid not working, can anyone shed some lights? thanks!

sonar-landing-page.module.css

.sonar-landing-wrapper {
    display: grid;
    grid-gap: 2rem;
    justify-items: stretch;
    align-items: stretch;
    grid-template-columns: repeat(6, 1fr);
    grid-column-gap: 5px;
    grid-auto-flow: row;
}

.sonar-history-job-table {
    grid-row: 2;
    grid-column: 1 / 7;
}
// test style I added to test if the css module itself is working
.error {
   color: red;
}

sonar-landing-page.js

import styles from './sonar-landing-page.module.css'

export default function SonarLandingPage() {
   return (
      <div className={styles.sonarLandingWrapper}>
        <div className={styles.sonarNewJobButton}>
           ...
        </div>
      </div>
   )
}

Answer 1

write your css styling as the same you use in component example .sonar-landing-wrapper ---> .sonarLandingWrapper

.sonarLandingWrapper {
    display: grid;
    grid-gap: 2rem;
    justify-items: stretch;
    align-items: stretch;
    grid-template-columns: repeat(6, 1fr);
    grid-column-gap: 5px;
    grid-auto-flow: row;
}

.sonarHistoryJobTable {
    grid-row: 2;
    grid-column: 1 / 7;
}
// test style I added to test if the css module itself is working
.error {
   color: red;
}