CODEWITHSUNDEEP
reactjs
Jim
Jim

Reputation: 2322

Why is css not rendering from App.css file

I dont know why this setup is not displaying the styles.

App.js component:

import React from 'react';
import './App.css';

class App extends React.Component {
    constructor () {
        super();
    }

    render () {
        return (
            <div className="App">
                <h1>Test Header</h1>
            </div>
        );
    }
}

export default App;

App.css:

h1 {
    color: "red";
}

Directory Structure:

src/

The h1 element is not red. Why

Upvotes: 1

Views: 136

Answers (2)

Juan Marco
Juan Marco

Reputation: 3241

It's simple you used the string "red" instead of red. Try this instead:

h1 {
  color: red;
}

That should work now.

Upvotes: 4

Superintendent UI
Superintendent UI

Reputation: 81

It's because you have red in quotes. Take off the quotes. Also, you don't need className="App". You actually don't have a css class called "App"., just an h1 {...;}.

This should work:

h1 {
    color: red;
}

<div>
    <h1>Test Header</h1>
</div>

Upvotes: -1

Related Questions