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?
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';
}
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;
}