Some CSS loaded into React app are not applied

Question

I'm building a react app with React Static Boilerplate.

Each component has a directory structure like this:

MyComponent/
-- MyComponent.css
-- MyComponent.js
-- package.json

and in the MyComponent.js file, I'm doing a raw import './MyComponent.css'

Let's say my CSS contains something like this:

body { background-color: orange; }
.card { background-color: purple; }

and the render function in my component renders a card:

render() {
  return (
    <div className="card">Hello World</div>
  );
}

The page's body will become orange, but the card will not become purple.

Why is this css not being fully applied to the HTML that is generated?

i tried, it doesn't even show up as seeing the css for .card at all. — Kristian
– Kristian, Commented Apr 13, 2017 at 18:42
Hmm. Have you got style-loader and css-loader installed and applied to webpack correctly? I would think so because the other CSS rule is applied but check to make sure. Also look into Developer Tools. — Andrew Li
– Andrew Li, Commented Apr 13, 2017 at 18:44

Toby · Accepted Answer · 2017-04-13 19:33:37Z

12

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>

answered Apr 13, 2017 at 19:33

Toby

13.5k9 gold badges51 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Peter Over a year ago

I just tried this and it does not work. Maybe it did in the past? Or is there more that needs to be done than what's in this answer?

Toby Over a year ago

It depends what the problem is - do you see an error? Or simply styles not being applies?

Peter Over a year ago

I think the problem was that the css file needs to be named foo.module.css where module is the name of the module into which it is imported. At least that's what fixed it for me (or maybe I have inadvertently changed something else that was causing it to fail but I believe the React website recommends the ....module.... naming scheme).

Diego H. O'Hagan Over a year ago

foo.module.css solved it for me!

user1169692 · Accepted Answer · 2017-11-30 15:22:53Z

2

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>

answered Nov 30, 2017 at 15:22

user1169692

462 bronze badges

Comments

0xAnon · Accepted Answer · 2019-04-26 08:37:28Z

i know the reason why it is not getting applied. there must be somewhere in your webpack you have applied the localIndentName prop. This do the hashing of your className and hence the hashed classname gets injected to the tag by style-loader but in DOM , you have unhashed class loaded. This prop only hash the DOM classname when you use css-modules style.

 {
                test: /\.(sa|sc|c)ss$/,
                use: [
                  argv.mode =='development' ? 'style-loader' : MiniCssExtractPlugin.loader,
                  {
                    loader: 'css-loader',
                    options: {
                    modules: true,//remove this or set to false
                    importLoaders: 1,
                    localIdentName: "[name]_[local]_[hash:base64:5]", //remove this 
                    }
                  },
                  'sass-loader'
                ]
            }

RBT · Accepted Answer · 2021-01-06 09:02:26Z

1

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!

edited Jan 6, 2021 at 9:02

answered Mar 7, 2019 at 10:41

RBT

26.3k24 gold badges178 silver badges267 bronze badges

Collectives™ on Stack Overflow

Some CSS loaded into React app are not applied

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related