如何使 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; }