CODEWITHSUNDEEP
reactjswebpack
Kristian
Kristian

Reputation: 21840

Some CSS loaded into React app are not applied

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?

Upvotes: 13

Views: 60881

Answers (4)

RBT
RBT

Reputation: 25965

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!

Upvotes: 1

0xAnon
0xAnon

Reputation: 897

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'
                ]
            }

Upvotes: 1

user1169692
user1169692

Reputation: 46

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>

Upvotes: 2

Toby
Toby

Reputation: 13415

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>

Upvotes: 12

Related Questions