Some CSS loaded into React app are not applied

I had an issue with CSS not being applied, but it wasn't the modules, it ended up being the syntax of applying multiple classes. The syntax below solved the problem

<div className={[styles['col-sm-16'], styles['col-md-10'], styles['col-lg-8']].join(' ')}> some content </div>

I came across an observation that typographical error was going undetected which is why it was not getting applied. Have a look at below HTML:

<div style={{display:"inline-block" ,position:"abosolute",right:"70px"}}>
</div>

Now when my page was getting rendered, the attributes display and right were getting applied but position attribute wasn't getting applied. For many hours I kept tried debugging it thinking that it was getting overridden somewhere.

Later on, I realised that the spelling of absolute had typographical error. But the Babel transpilation engine or developer tools in the browser was eating the error silently making things difficult for me to debug. I don't know why transpilers or browsers doesn't complain in such a case.

Hope this information helps someone!

According to the React Static Boilerplate website, they use CSS Modules - this would explain why the body tag is being respected but the class selector is not.

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

try importing the stylesheet like so:

import styles from './MyComponent.css';

The using it in your component like so:

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