加载到 React 应用程序中的某些 CSS 未应用

我正在使用 React Static Boilerplate 构建一个 React 应用程序。

每个组件都有这样的目录结构：

MyComponent/
-- MyComponent.css
-- MyComponent.js
-- package.json

并在MyComponent.js文件，我正在做一个原始的import './MyComponent.css'

假设我的 CSS 包含这样的内容：

body { background-color: orange; }
.card { background-color: purple; }

我的组件中的渲染函数渲染一张卡片：

render() {
  return (
    <div className="card">Hello World</div>
  );
}

页面主体将变成橙色，但卡片不会变成紫色。

为什么这个 css 没有完全应用到生成的 HTML 中？

根据 React Static Boilerplate 网站，他们使用 CSS 模块 - 这可以解释为什么body标签受到尊重，但类选择器不被尊重。

https://github.com/css-modules/css-modules https://github.com/css-modules/css-modules

尝试像这样导入样式表：

import styles from './MyComponent.css';

在您的组件中使用它，如下所示：

<div className={styles.card}>something!</div>