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 Ben Kolya Mansley · Accepted Answer · 2018-01-29T01:45:20

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.

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

1 Answers