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

Question

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

每个组件都有一个如下的目录结构:

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？

Answer 1

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

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

尝试像这样导入样式表:

import styles from './MyComponent.css';

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

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