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>
   )
}

Ali Taghipour · Accepted Answer · 2021-04-07 23:07:16Z

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;
}

edited Apr 7, 2021 at 23:07

answered Apr 7, 2021 at 23:04

Ali Taghipour

1144 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

photosynthesis Over a year ago

life saver! thanks for the propt answer as well!

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related