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>
)
}
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; }
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.