CSS 不适用于组件

Question

我有一个包含在 div:

中的反应组件

AccountLogin.jsx:

import './AccountLogin.css';
export default observer(() => (
  <div className="content">
    Something here
  </div>
));

AccountLogin.css:

.content {
  color: blue;
  background-color: blue;
  margin: 500px;
}

但是 css 不适用于我呈现的组件 AccountLogin。

知道为什么会发生这种情况吗？

Answer 1

正在查看 rfx-stack source, I can see that files suffixed with .global.css are imported in global scope where as others are imported as css-modules。

因此您可以将文件重命名为 AccountLogin.global.css 或使用导入的 class 名称：

import styles from './AccountLogin.css';

Within component: 
<div className={styles.content}>...</div>

CSS doesn't apply to a component