title: how change background color in different pages
body: <p>i am two page in <code>reactjs</code></p>
  <p>pageOne.js:</p>
  <pre><code>import React from &quot;react&quot;;
  import { Link } from &quot;react-router-dom&quot;;
  import &quot;./pageOne.css&quot;;
  const PageOne = () =&gt; {
    return (
      &lt;div&gt;
        one
        &lt;br /&gt;
        &lt;Link to=&quot;/pageTwo&quot;&gt;Two Page&lt;/Link&gt;
      &lt;/div&gt;
    );
  };
  export default PageOne;
  
  </code></pre>
  <p>pageTwo.js:</p>
  <pre><code>import React from &quot;react&quot;;
  import { Link } from &quot;react-router-dom&quot;;
  import &quot;./pageTwo.css&quot;;
  const PageTwo = () =&gt; {
    return (
      &lt;div&gt;
        two
        &lt;br /&gt;
        &lt;Link to=&quot;/&quot;&gt;One Page&lt;/Link&gt;
      &lt;/div&gt;
    );
  };
  export default PageTwo;
  
  </code></pre>
  <p>i am define two css files for change background color when page loaded.</p>
  <p>pageOne.css</p>
  <pre><code>body {
    background-color: whitesmoke !important;
  }
  
  </code></pre>
  <p>pageTwo.css</p>
  <pre><code>body {
    background-color: crimson !important;
  }
  
  </code></pre>
  <p>it's problem.in <code>pageOne</code> background color is <code>crimson</code> and in <code>pageTwo</code> background color is <code>crimson</code>.
  <br />
  <a href="https://codesandbox.io/s/modest-mccarthy-w4xjq?file=/src/pageTwo.css:27-34" rel="nofollow noreferrer">sample</a></p>