CSS doesn't apply to a component

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?

As in the styles does not appear to be in the definition of the div? or is it getting overridden by something? — Huangism, Feb 12 '18 at 15:56
@Johnny_H I changed it to other custom string but it didn't help. — Mindaugas Nakrošis, Feb 12 '18 at 15:57
Does the component actually render? I don't see a `render` method. — jmargolisvt, Feb 12 '18 at 15:57
@Huangism I see the rendered content and the margin doesn't apply, I don't know if it is getting overriden or just doesn't apply. — Mindaugas Nakrošis, Feb 12 '18 at 15:58
if you are inspecting and see the rules, scroll down and see if there is a margin overriding it. Only margin doesn't work and everything else does? Are you able to reproduce this in http://jsfiddle.net ? Could you paste the output html instead of what you have — Huangism, Feb 12 '18 at 16:00
If this AccountLogin.jsx is imported in another component which's parent also has className does it override the child className and its css? — Mindaugas Nakrošis, Feb 12 '18 at 16:02
Can you share your webpack config ? It is likely that your webpack is configured to use css modules. — lorefnon, Feb 12 '18 at 16:06
@lorefnon https://pastebin.com/kVw7Ns6m Found two webpack configs, pasted them both in here as I don't know which one do you need and how they differ. — Mindaugas Nakrošis, Feb 12 '18 at 16:09
@lorefnon I am using rfx stack but I don't think it is related to that. — Mindaugas Nakrošis, Feb 12 '18 at 16:13

score 2 · Accepted Answer · answered Feb 12 '18 at 16:15

2

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>

answered Feb 12 '18 at 16:15

lorefnon

12,112
4
54
87

That was fast by you, appreciate the help fellow developer! – Mindaugas Nakrošis Feb 12 '18 at 16:18

CSS doesn't apply to a component

1 Answers1