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

Question

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

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

声纳着陆-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 样式，就像您在组件中使用的一样例如.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;
}

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

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

css

reactjs

css-grid

css-modules

react-css-modules