Set height to body in React

Manipulate body from the React's root element

I am currently trying out small examples in React. I wanted to learn on how to access the body of the React app, without actually accessing the <body> element. All React apps have a default <div> with the ID root. This is the actual body element of the React app. Hence, the styles applied to the root should get applied on the <body> too. Let us see how to do it.

Consider enabling dark mode of the application. We need to ensure that the class when added to the root div element the dark mode is enabled to the entire body. To achieve this, we set the height of the body and then the div element in CSS as follows: 

                    
     html,
     body {
        margin: 0;
        height: 100%;
    }

    #root {
        height: 100%;
    }

    .dark-mode {
        color: white;
        background-color: black;
    }

This will ensure the height of the div root element is same as the <body> element.

Check out this example in this link.