React Routes - Different Styling on Body CSS Tag

React Routes - different styling on body css tag

That's happening because when you import your styles in your component without CSS Modules, the styles are global so your body style is defined two times (you can see all the styles in the <head> tag).

Sample Image

You can fix that by setting the background color in your component componentDidMount() method.

Example

componentDidMount(){
    document.body.style.backgroundColor = "red"// Set the style
    document.body.className="body-component-a" // Or set the class
}

Different css stylesheet for routes

I recommend to use the following file structure and pattern:

- components
  - Main.js
  - Utility
    - index.js
    - styles.scss
- pages
    - HomePage
      - index.js
      - styles.scss

Then specify the component related styles within the component's stylesheet, and the page-realated styles within the page's stylesheet. And use pages for routes, not components.
Finally, wrap every component into a specific class selector, and add wrap the belonging sass file into that selector (like .home-page).
For this reason, please, use sass instead of css, because you can embed style definitions within each other and use the top one as a "namespace". So the styles will not affect to each other.

// Main.js
  import HomePage from '../pages/HomePage';

  <Switch>
    <Route path="/" exact component={HomePage} />
    <Route path="/research" component={ResearchPage} />

// HomePage/index.js

  import Utility from './components/Utility';
  import './styles.scss';
  ...
  render(){
    <div className="home-page">
      <Utility />
    </div>
  }

// HomePage/styles.scss    
  .home-page {
    ...
  }

// Utility/index.js

  import './styles.scss';
  ...

  render(){
    return (
      <div className="utility-comp">
      ...
      </div>
  }

// Utility/styles.scss
  .utility-comp {
    ...
  }

How would you style the body of multiple pages in a reactjs app without having them overlapping each other?

The recommended React practice for controlling markup outside React is React Helmet.

In each of your component, include a Helmet that defines body styles (and other attributes) like this:


import Helmet from 'react-helmet';
function Page(props) {
    const bgColor = '#ddd';
    return (
       <div class="page">
                <Helmet>
                    {/* Define inline CSS for body tag */}
                    <body style="background-color: #ddd" />
                    {/* Or include in-file CSS */}
                    <style>
                       {`
                            body {
                                background-color: ${bgColor};
                            }
                       `}
                    </style>
                </Helmet>
                {/* Rest of your component content goes here ... /*}
       </div>
    );
}

Helmet can be nested inside each other via component hierarchy and function like CSS cascading, so you can customize body at any level deep (among child components) as you like.

Note: This approach is only suitable for defining CSS on markup outside React like html, body. Inside React components follow better methods to import controlled CSS like CSS Modules, Styled Component, etc.

Update 1

In your case, place the Helmet as first child of <Fragment>:

     <Fragment>
         <Helmet>
             <style>
                {`
                   html, body {
                       height: 100%;
                  }

                 body {
                    background-image: url("/client/src/components/images/undraw_people_tax5.png"), url("/client/src/components/images/undraw_together_j0gj.png");
                    background-size: 80% 100%, 101% 100%;
                    background-repeat: no-repeat;
                    background-position: 1% 60%, 80% 110%;
                  }
                `}
            </style>
         </Helmet>
       {/* Rest of your Fragment goes here ... /*}
     </Fragment>

Update 2

If you want to use CSS file, instead of inlining everything like this, replace your import './Login.css) with this:

 const css = require('./Login.css').toString();

Then your <style> can just include the CSS string:

                <Helmet>
                    <style>
                        {css}
                    </style>
                </Helmet>

React.js router rendering different body tags

I solved my problem:

componentDidMount() {
    document.getElementsByTagName('body')[0].className = 'page-landing';
}

componentWillUnmount() {
    document.getElementsByTagName('body')[0].className = '';
}

When mounting component I did that it changes body tags class and when unmounting leaving it empty.

Apply style to html and body on a specific React Route

Try this its work fine

body, html { margin: 0; padding: 0;display: flex; width: 100%; height: 100%; flex-direction: column; background-color: blue; overflow: hidden;}
.row-container {display: flex; width: 100%; height: 100%; flex-direction: column; background-color: blue; overflow: hidden;}
.first-row {background-color: lime; }
.second-row { flex-grow: 1; border: none; margin: 0; padding: 0; }

   <html>

<body>
<header>

    <h1>Tests</h1>
</header>
<div class="row-container">
    <div class="first-row">
        <p>Some text</p>
        <p>And some more text</p>
    </div>
    <iframe src="https://example.com" class="second-row"></iframe>
</div>
</body>

</html>

Trying to use React.DOM to set body styles

Assuming your body tag isn't part of another React component, just change it as usual:

document.body.style.backgroundColor = "green";
//elsewhere..
return (
  <div>
    Stuff goes here.
  </div>
);

It's recommended to put it at componentWillMount method, and cancel it at componentWillUnmount:

componentWillMount: function(){
    document.body.style.backgroundColor = "green";
}

componentWillUnmount: function(){
    document.body.style.backgroundColor = null;
}

React Routes - Different Styling on Body CSS Tag