How i can apply a background image to the body of only ONE Component React-CodePudding

I have a main component on every page, which is Navbar, and I have another component, which is a page to contact us. I want to make a background for a component that contact us, but it does not affect the Navbar? Also, if I give body tag the background image, all the other components will take the same background as the photo cuz i give it to the body! what i can do in this case?

CodePudding user response：

You have to wrap each component in a different div.

<div>
 Navbar
</div>

<div style={{backgroundColor: 'color here'}}>
 Contact us
</div>

Style inside the div or add a className and style in a separate file with CSS:

<div className="yourClass">
 Contact us
</>

and in a separate .css file:

.yourClass {
 background-color: 'color name';
}

CodePudding user response：

Simple HTML question, just apply the class to only one of your elements, and don't have them nested.

<containing-element>
  <navbar />
  <contact-page className="contact" />
</containing-element>

You can then style .contact

.contact {
  background-color: #FF0000;
}