Why is css not rendering from App.css file

Question

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/

App.css
App.js

The h1 element is not red. Why

Dear @Jim, Do you use CRA for this sample code?

AmerllicA
– AmerllicA

2020-02-13 23:52:16 +00:00
Commented Feb 13, 2020 at 23:52 — AmerllicA
– AmerllicA, Commented Feb 13, 2020 at 23:52
yes, I believe it was used

Jim
– Jim

2020-02-13 23:53:21 +00:00
Commented Feb 13, 2020 at 23:53 — Jim
– Jim, Commented Feb 13, 2020 at 23:53

Juan Marco · Accepted Answer · 2020-02-13 23:54:30Z

4

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

h1 {
  color: red;
}

That should work now.

answered Feb 13, 2020 at 23:54

Juan Marco

3,2512 gold badges31 silver badges35 bronze badges

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

2 Comments

AmerllicA Over a year ago

Exactly right, you act like a tiger. nice, I leave an upvote for your high intelligence

Juan Marco Over a year ago

No worries Jim! Happens to us all from time to time.

Superintendent UI · Accepted Answer · 2020-02-13 23:53:57Z

-1

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>

edited Feb 13, 2020 at 23:53

answered Feb 13, 2020 at 23:45

Superintendent UI

813 silver badges11 bronze badges

2 Comments

Jim Over a year ago

yes it did save. and removing className="App" did not fix

AmerllicA Over a year ago

Dear @Jim, Actually, using a useless class name doesn't cause to this issue. I think this issue is more than it appears. I guess it's from its configs.

Collectives™ on Stack Overflow

Why is css not rendering from App.css file

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related