如何使 CSS 网格与 CSS 模块样式表一起工作

问题描述

我们有一个定义了网格的 css 文件，它以前运行良好。最近我们正在尝试使用 CSS 模块并将文件名从 sonar-landing-page.css 更改为 sonar-landing-page.module.css 并将其导入到js 文件，如下面的代码示例，然后它停止工作，css 模块本身似乎工作正常，因为我们添加了一个简单的 .error 样式，如下所示，红色显示正确，但它是只是网格不工作，有人可以点亮一些灯吗？谢谢！

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

解决方法

像在组件中使用的一样编写你的 css 样式 示例 .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;
}