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

Question

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

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

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？

Answer 1

根据React Static Boilerplate网站,他们使用CSS模块 - 这可以解释为什么body标签被尊重但类选择器没有.

尝试导入样式表,如下所示:

import styles from './MyComponent.css';

在组件中使用它如下:

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

我认为问题在于 css 文件需要命名为“foo.module.css”，其中“module”是导入该文件的模块的名称。至少这就是为我解决的问题（或者也许我无意中更改了导致其失败的其他内容，但我相信 React 网站推荐使用 `....module....` 命名方案）。 (6认同)
foo.module.css 为我解决了它！ (2认同)