如何使 CSS 网格与 CSS 模块样式表反应

Question

我们有一个定义了网格的 css 文件，它之前工作正常。 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模块本身似乎工作正常，因为我们添加了一个简单的.error样式，如下所示，红色显示正确，但只是网格无法正常工作，有人能解释一下吗？ 谢谢！

声纳着陆页.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;
}

声纳登陆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

编写您的 css 样式，与您在组件 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; }