Only a few CSS files apply their styles in React

Question

I am creating a ReactJs app, and am trying to apply styles. I load styles in the normal way (without webpack css modules):

import React, {Component} from 'react';

//styles
import './Header.css';

class Header extends Component {
render() {
    return(
        <div className='header'>
            <h1>Save</h1>
        </div>
    );
  }
}

The styles that I have for the header class apply, and everything is groovy. But for about 50% of my ReactJs files and their subsequent CSS files, the class styles do not apply. There is no error either, it finds the CSS and just doesn't apply the styles on some of the files.

I have no idea what is wrong, thanks!

EDIT 1 The header.css file:

 .header {
  width: 100%;
  top: 0;
  left:0;
  text-align: right;
  height: 100px;
  margin: 0 auto;
 }
 .header h1 {
  margin: 0;
  margin-right: 40px;
  cursor: pointer;
}

Edit 2 Example of class whose styles don't apply

Matrix.js:

import './Matrix.css';

render() {
    const {users, selectedDivision} = this.state;

    return(
        <div className='container' style={{display:'grid', gridTemplateColumns:'200px 1fr'}}>

            <div style={{textAlign: 'left'}}>
                <input type='text' placeholder="Search Divisions" onChange={(e)=>this.search(e)} className='searchDivs'/>
                <Scroller divisions={this.state.displayDivisions}  handleSelectedDivisionChange={this.handleSelectedDivisionChange.bind(this)} />    
            </div>
            <div style={{marginLeft: '10px'}}>
                <Division division={selectedDivision} users={users} addToParentDivisions={this.handleNewUserAddedToDivision.bind(this)}/>     
            </div>

        </div>
    );
}

Here my work around has been to use inline styles but I want to try to avoid this as a best practice

Edit 3

Looking at dev tools in Chrome it shows that my css is not loaded because they are invalid property values?

So React is loading in the styles, but just refusing to display because they are invalid?

Can you provide a minimal reproducible example which shows the code that doesn’t work? — evolutionxbox
@Auriga Added the header.css. Really nothing crazy going on here, just a class — bflynnigan
The text of the question says that the header class works. Can you post an example of a class that doesn't work? — Austin Mullins
In the chrome dev tools, it looks like your styling values are getting wrapped as strings. Did you accidentally do that in some of your css files? — larz

Arno van Staden Arno van Staden · Accepted Answer · 2019-11-12T07:01:46

Just had the exact same problem!

Solution: Remove quotation marks (") around your property values.

Inline styles in JS require them but CSS does not.

I work in CSS every day I should've known this. VSCode didn't pick it up either. (Facepalm)

Only a few CSS files apply their styles in React

2 Answers