Change the entire color of a React tab

Question

I want to make my page in darker tones, my folder structure is:

index.js

ReactDOM.render(
    <Provider store={Store}>
        <PersistGate loading={null} persistor={persistor}>
            <App baseUrl={baseUrl} />
        </PersistGate>
    </Provider>,
    document.getElementById('root'));

App.js

function App(props) {
    return (
        <div className="App">
            <Root
                isAuth={props.isAuth}
                baseUrl={props.baseUrl}
            />
        </div>
    );
}

App.css

.App {
  background-color: black; //Só para testar o funcionamento
  text-align: center;
}
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

Root.js

class Root extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div>
                <Router basename={this.props.baseUrl}>
                    {
                        this.props.isAuth ?
                            <Navbar
                                logo={ logo }
                                background="#404040"
                                hoverBackground="#ddd"
                                linkColor="#777"
                            />
                            : ''
                    }
                    <Switch>
                        {
                            this.props.isAuth ?
                                <React.Fragment>
                                    <Route path="/Home" component={Home} />
                                    <Route path="/Treinos" component={Treinos} />
                                    <Route path="/Lives" component={Lives} />
                                    <Route path="/Video_Aulas" component={VideoAulas} />
                                    <Route path="/">
                                        <Redirect to="/Home" />
                                    </Route>
                                </React.Fragment>
                                :
                                <React.Fragment>
                                    <Route path="/">
                                        <Redirect to="/Login" />
                                    </Route>
                                    <Route path="/Login" component={Login} />
                                </React.Fragment>
                        }
                    </Switch>
                </Router>
            </div>
        );
    }
}

But the page looks like this, I’d like it to cover the whole page, not just that piece.

I tried to put the background-color in the css of index.js but nothing happened.

What should I do to change the entire background-color of the application??

Answer 1

The height of the component App is limited to its content, so it does not reach the full page. You can edit the css and put it on .App the property height: 100vh. That one vh is the unit of 1% of the display height, i.e., 100vh force the component to occupy 100% of the height whether in a browser, on a mobile phone or other display medium.

Answer 2

I don’t know exactly what your code does, but a simple example can help you solve the problem of color change on the page:

function BodyPage() {  
  const [color, setColor] = React.useState('black');
  React.useEffect(() => {
    document.body.style.backgroundColor = color;
  }, [color]);
  return (
    <div>            
      <button onClick={e => 
          setColor(color === 'black'?'white':'black')}
      >Mudando de cor</button>
    </div>
  );
}
ReactDOM.render( <BodyPage/> , document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.9.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.9.0/umd/react-dom.production.min.js"></script>

<div id="root"></div>

that is, in the document.body.style.backgroundColor you pass a color to the full page with component state.