CODEWITHSUNDEEP
cssreactjs
bflynnigan
bflynnigan

Reputation: 236

Only a few CSS files apply their styles in React

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?

Hovering over the exclamation says invalid property value

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

Upvotes: 0

Views: 547

Answers (2)

Arno van Staden
Arno van Staden

Reputation: 11

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)

Upvotes: 1

Chimera.Zen
Chimera.Zen

Reputation: 1180

Assuming everything else is working properly like importing the right css file, using className, etc. I've found that, on rare occasions, something gets stuck in the browser cache and needs a full refresh.

Mac: Command+shift+R

Win: Ctrl+shift+R

Upvotes: 0

Related Questions