Changing App.css in create-react-app not affecting page

Question

My index.js for React, I used a create-react-app starter project.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

My app.js includes:

import './App.css';

and I use the CSS:

.body {
  background-color: "green"
}

and the body does not change to green.

How do I modify CSS? I also tried placing app.css into public/app.css and loading with link rel="stylesheet" Element inspector still showed no effect.

Element inspector shows margin of 8px on body element from "user agent stylesheet".. nothing from my loaded css.

EDIT:

I also try inline style tag:

<!doctype html>
<html lang="en">
<script src="web3.js"></script>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <title>CryptoClicker</title>
  </head>
  <body>
    <div id="root"></div>

  </body>
  <style>
  .body {
    background: "green";
  }
  </style>
</html>

no effect.

Ben Kolya Mansley · Accepted Answer · 2018-01-29 01:45:20Z

4

You're using .body which is looking for elements with the class 'body' - as there's a . Change that to body (with no .) and it'll style the body element rather than the class.

Also, named colours in CSS are not variable strings - so remove the quotes:

body {
  background: green;
}

It'd be worth putting your styles back into App.css and importing it in JS rather than using the <style> tags.

answered Jan 29, 2018 at 1:45

Ben Kolya Mansley

1,79316 silver badges24 bronze badges

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

3 Comments

quantumpotato Over a year ago

Thank you - I switched back to App.css. Removing the . answers the question! How can I reference by #? I tried background: "#AABBCC"

Ben Kolya Mansley Over a year ago

Again, remove the quotes - background: #aabbcc is fine. You pretty much never need quotes for anything native to CSS.

quantumpotato Over a year ago

I did not expect that. Thank you for the clarification

Collectives™ on Stack Overflow

Changing App.css in create-react-app not affecting page

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related