reactjs – 未应用加载到React app中的一些CSS

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

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

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

在MyComponent.js文件中,我正在进行原始导入’./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模块 – 这可以解释为什么正文标记被尊重但类选择器不被尊重.

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

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

从’./MyComponent.css’导入样式;

在组件中使用它如下：

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