CSS不适用于组件

Question

I have a react component that is wrapped up in 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;
}

But the css doesn't apply to my rendered component AccountLogin.

Any ideas why that could happen?

Answer 1

Looking at 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 .

So you can either rename your file to AccountLogin.global.css or use the imported class name:

import styles from './AccountLogin.css';

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