CODEWITHSUNDEEP
javascripthtmlcssreactjsmobx
Mindaugas Nakrošis
Mindaugas Nakrošis

Reputation: 120

CSS doesn't apply to a component

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?

Upvotes: 0

Views: 67

Answers (1)

lorefnon
lorefnon

Reputation: 13115

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>

Upvotes: 2

Related Questions