how change background color in different pages

user_6774162 0
Viewed 2843

i am two page in reactjs

pageOne.js:

import React from "react";
import { Link } from "react-router-dom";
import "./pageOne.css";
const PageOne = () => {
  return (
    <div>
      one
      <br />
      <Link to="/pageTwo">Two Page</Link>
    </div>
  );
};
export default PageOne;

pageTwo.js:

import React from "react";
import { Link } from "react-router-dom";
import "./pageTwo.css";
const PageTwo = () => {
  return (
    <div>
      two
      <br />
      <Link to="/">One Page</Link>
    </div>
  );
};
export default PageTwo;

i am define two css files for change background color when page loaded.

pageOne.css

body {
  background-color: whitesmoke !important;
}

pageTwo.css

body {
  background-color: crimson !important;
}

it's problem.in pageOne background color is crimson and in pageTwo background color is crimson.
sample

react-router-dom reactjs
2 Answers

As I said earlier, there is only one body tag in the DOM tree by default. So when you try to style it whatever comes last will override the previous ones and in your case, the page two style will override the page one style.

To solve this, you got several options, but I will go with the easiest one. You can make a container for each of your pages and then assign a colour to that container to make the whole page background as you desired (You can simply make a layout component then wrap each of the components within it and with similar approach make it reusable). So, for example, you can create your first page like this:

<div className="crimson">
   two
   <br />
   <Link to="/">one Page</Link>
</div>

and style it like this:

.crimson {
  background-color: crimson;
  min-height: 100vh; /* minimum height of page would be equal to available view-port height */
}

This goes the same for your other page. But you need to consider you have to remove the default margins from the body itself to prevent any disorder.

Working Demo:

CodeSandbox

user_119085020

I would solve this with Layout component:

const Layout = ({ backgroundColor = '#fff', children }) => (
  <div style={{ backgroundColor }} className="layout">
    {children}
  </div>
)

then remove your css(and try not to use important in your css)

<Layout backgroundColor="#fff"><PageOne /></Layout>

and

<Layout backgroundColor="#f00"><PageTwo /></Layout>
user_142305110
Related