Style root element using css file, but not working

Question

I have the entry component in reactjs:

import React from "react"
import ReactDOM from 'react-dom';
import App from "./js/components/App.js"
import './index.css';

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

I am trying to style in the root element inside of my css file, index.css:

  #root {

    background-color: brown;
    height:100vh;
    width:100vh;
  }

The background though is not brown. When looking at the styling the browser renders I cannot see any of these attributes being applied to the root element.

This is my webpack config:

const HtmlWebPackPlugin = require("html-webpack-plugin");
module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: "html-loader"
          }
        ]
      },
      {
        test: /\.css$/,
        use: ['css-loader'],
      },
    ]
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: "./src/index.html",
      filename: "./index.html"
    })
  ]
};

It is as if it is not loading the index.css file at all.

you are applying background color twice. – DigitalJedi May 18 '19 at 20:49 — DigitalJedi, May 18 '19 at 20:49
sorry that was a type while I was debugging. Removed it now – user2924127 May 18 '19 at 20:52 — user2924127, May 18 '19 at 20:52

score 0 · Answer 1 · answered May 18 '19 at 20:50

You cannot style the #root of your app. Just style the className of <App /> component, for example:

const App = () => (
  <div className="app>
  // ...
  </div>
)

css file:

.app {
  background-color: #ffffff;
  background-color: brown;
  height:100vh;
  width:100vh;
}

score 0 · Answer 2 · answered May 18 '19 at 20:57

When using webpack, i think you have to specify your entry points of your css/js files like this...

entry: [
        "./src/js/index.js",
        "./src/sass/style.scss",
    ],
    output: {
        filename: "bundle.js",
        path: path.resolve(__dirname, 'assets/js')
    },
    module: {
        rules: [
/* you code here */
...
...

score 0 · Answer 3 · answered Jul 05 '23 at 03:50

soln-workaround 1

use Javascript

vv

const root = document.getElementById('root') as HTMLDivElement;
root.style.cssText = "height: 100%;       border: 1px solid green;";

soln-workaround 2

put the <style> directly in the html, instead of inside the css.

vv

<style>
  #root {
    height: 100%;
    border: 1px solid green;
  }
</style>

misc

Have the same problem. & Idk how others did it. & I dont think my post is a good solution.
It needs to be on the root, not on another <div> wraps the App, cuz I need to get height: 100% working.
the use of :root doesnt work
the use of .App doesnt work
related post

Style root element using css file, but not working (this post)

CSS 100% height not working in React app (Idk why ppl in this post seems have no issue...)

Style background color of root React Javascript (source of the soln-workaround)

Style root element using css file, but not working

3 Answers3

soln-workaround 1

soln-workaround 2

misc