title: How would you style the "body" of multiple pages in a reactjs app without having them overlapping each other?
body: <p>Okay, guys.</p>
  <p>Having tried multiple different ways in various different ways, I came here for the experts who definitely knows the answer for this simple problem.</p>
  <p>So, the issue I'm having is that whenever I try to add background images and other properties to the &quot;body&quot; of the pages in the app that I'm creating, , it adds only the CSS of a single page for all the other pages.</p>
  <p>If this question sounds too hefty, let me boil it down to this:</p>
  <p>How can you add different styles for the <strong>body</strong> tag of the multiple pages?</p>
  <p>To make things easy for you, you can have a look at the following code:</p>
  <p>Here's the Login file</p>
  <pre><code>import React, { Fragment, useState } from 'react';
  
  import { Link, Redirect } from 'react-router-dom';
  import { connect } from 'react-redux';
  import PropTypes from 'prop-types';
  import { login } from '../../../actions/auth';
  
  import './Login.css';
  
  
  
  
  const Login = ({ login, isAuthenticated }) =&gt; {
  
      const [formData, setFormData] = useState({
          email: '',
          password: ''
      })
  
  
      const { email, password } = formData;
  
      const onChange = e =&gt; setFormData({ ...formData, [e.target.name]: e.target.value });
  
      const onSubmit = async e =&gt; {
          e.preventDefault();
          login(email, password)
      }
  
      if (isAuthenticated) {
          return &lt;Redirect to=&quot;/dashboard&quot; /&gt;
      }
  
  
  
      return (
  
          &lt;Fragment&gt;
  
              &lt;section className=&quot;bodyLogin&quot;&gt;
                  &lt;h1&gt;Login&lt;/h1&gt;
                  &lt;form className=&quot;loginForm&quot; onSubmit={e =&gt; onSubmit(e)}&gt;
  
                      &lt;input type=&quot;email&quot;
                          name=&quot;email&quot;
                          placeholder=&quot;Email..............&quot;
                          value={email}
                          onChange={e =&gt; onChange(e)}
  
                          required /&gt; &lt;br /&gt;&lt;br /&gt;
  
                      &lt;input type=&quot;password&quot;
                          name=&quot;password&quot;
                          placeholder=&quot;Password..............&quot;
                          value={password}
                          onChange={e =&gt; onChange(e)}
                          required /&gt;&lt;br /&gt;&lt;br /&gt;
  
                      &lt;div className=&quot;account-login&quot;&gt;
                          &lt;p&gt;Don't have an account? &lt;span&gt;&lt;Link to=&quot;/register&quot;&gt;Register&lt;/Link&gt; &lt;/span&gt;&lt;/p&gt;
                      &lt;/div&gt;
  
                      &lt;div className=&quot;btn-login&quot;&gt;
                          &lt;input type=&quot;submit&quot; name=&quot;Login&quot; defaultValue=&quot;Log In&quot; /&gt;
                          &lt;Link to=&quot;/&quot;&gt;&lt;input type=&quot;button&quot; name=&quot;Back&quot; defaultValue=&quot;Back&quot; /&gt; &lt;/Link&gt;
                      &lt;/div&gt;
                  &lt;/form&gt;
              &lt;/section&gt;
  
          &lt;/Fragment&gt;
  
  
  
      )
  
  
  
  }
  
  
  Login.propTypes = {
  
      login: PropTypes.func.isRequired,
      isAuthenticated: PropTypes.bool
  
  
  }
  
  const mapStateToProps = state =&gt; ({
  
      isAuthenticated: state.auth.isAuthenticated
  });
  
  
  
  
  export default connect(mapStateToProps, { login })(Login);
  </code></pre>
  <p>Its css file</p>
  <pre><code>html,
  .Login&gt;.bodyLogin {
  
      height: 100%;
  
  
  }
  
  
  .Login&gt;.bodyLogin {
  
  
      background-image: url(&quot;/client/src/components/images/undraw_people_tax5.png&quot;), url(&quot;/client/src/components/images/undraw_together_j0gj.png&quot;);
  
      background-size: 80% 100%, 101% 100%;
      background-repeat: no-repeat;
      background-position: 1% 60%, 80% 110%;
  
  
  
  
  
  }
  </code></pre>
  <p>Now, I want to add different background images for other pages. But I get the same image that I used for the Login.js.</p>
  <p>Modules didn't really work. Do you know a way to go about solving this?</p>
  <p>I add the following functional component like this:</p>
  <pre><code>const Login = ({ login, isAuthenticated }) =&gt; {
  
  
      useEffect(() =&gt; {
          document.querySelector('body').style.backgroundImage = url(&quot;../../images/undraw_people_tax5.png&quot;);
      })
  </code></pre>
  <p>But I was shoved with this red error!</p>
  <p><a href="https://i.stack.imgur.com/Fn2vy.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Fn2vy.png" alt="enter image description here" /></a></p>