How can I have different background color for different component in a React app?

Question

I have never worked with React, Js or CSS. So, I decided to make a very simple Portfolio site with some additional pages. I have planned for having three pages -> Home, About and Portfolio. I have the Home page working as I want it to. I was working on the About page and I realized that whenever I use a custom css for this component with a different background color, it makes it default background color for every component. I'm using routes to jump from one component to the other. I think I'm doing something wrong with routes in index.js. My index.js looks like below,

Index.js

import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter as Router, Route} from 'react-router-dom'
import App from './component/js/App';
import About from './component/js/About'

ReactDOM.render((
    <Router>
        <div>           
               <Route path='/' component={App} exact/> 
               <Route path='/about' component={About} strict/>
        </div>
    </Router>
), document.getElementById('root'))

I did not create a route for Portfolio since I have not started working on it yet. My App.js looks like below

App.js

import React from 'react';
import Git from '../../images/github.png';
import Email from '../../images/email.png';
import CV from '../../images/resume.png';
import Resume from '../../files/2019.pdf';
import LinkedIn from '../../images/linkedin.png';
import '../css/App.css';
import {NavLink} from 'react-router-dom';

export default class App extends React.Component {

    render = () => {

        let git_url = 'xxxx'
        let Linkedin = 'xxxx'

        return (
            <div id='main'>
                <div id='menu'>
                    <NavLink id='nav' to='/about'>About</NavLink>
                    <NavLink id='nav' to='/portfolio'>Portfolio</NavLink>
                    <NavLink id='nav' to='/home'>Home</NavLink>
                </div>

                <div id='name'>
                    <h1 id='pp'>xxxxx</h1>
                    <h2 id='title'>Engineer / Developer / Designer</h2>
                </div>

                <div id='contacts'>
                    <a href={git_url} target='_blank'><img className='nav' id='git' src={Git} /></a>
                    <a href={Resume} target='_blank'><img className='nav' id='cv' src={CV} /></a>
                    <a href={Linkedin} target='_blank'><img className='nav' id='cv' src={LinkedIn} /></a>
                    <img className='nav' id='email' src={Email} />
                </div>

            </div>
        )
    }
}

And the css for it looks like below

App.css

body{
    background-color: khaki}
#main{
    display: flex;
    text-align: center;
    flex-direction: column;
    margin-top: 10%;
}

#menu {
    text-align: center;
    flex-direction: row;
}

#nav {
    padding: 14px 16px;
    text-decoration: none;
    color: #061A40;
    font-size: 20px;
    font-weight: bold;
}

#nav:hover {
    background-color: #d75f5f;
}

#pp {
    color: transparent;
    background: url(../../images/background2.jpg) no-repeat center center;
    background-size:100%;
    -webkit-background-clip: text;
    background-clip: text;
    margin: 0;
    padding: 0;
    font-size: 100px;
}

#title {
    font-size: 24px;
    color: #214F4B;
}

#contacts {
    display: flex;
    align-self: center;
    flex-wrap: wrap;
}

.nav {
    height: auto;
    width: 50px;    
    margin: 15px;
    transition: transform 3s;
}

.nav:hover{
    transform: scale(1.5);
}

I created a test About component to figure out this background-color issue and below is my code,

About.js

import '../css/About.css'
import React from 'react';
export default class About extends React.Component {
    render = () => {
        return (
            <div>
                <div id='test'>
                    <h1>Test</h1>
                </div>
                <div id='line'></div>
            </div>
        )
    }
}

The css for this looks like below

About.css

body {
    background-color:white;
}
#test {
    text-align: center;
    background-color: #B6C8A9;
    padding: 0.01%;
}

h1 {
    color: #160C28;
    font-family: Arial;
}

In the About.css file, if I have the body{background-color: ...}, every page becomes that color. If I take it out, every page becomes whatever color was set in App.css. As I said, I'm new to JS, CSS and React in general. As I understand, if I include a custom css in the component, it should only apply it to that component. I don't know why it's applying to all the component.

Answer 1

body refers to the whole webpage so it colors the thing which all components are inside of. Further, the CSS in your About.css file is not added/removed when the component is added/removed.

The simplest solution would be to make your About page a div that fills the whole screen and color that.

About.js

export default class About extends React.Component {
    render = () => {
        return (
            <div className="about-page">
                <div id='test'>
                    <h1>Test</h1>
                </div>
                <div id='line'></div>
            </div>
        )
    }
}

About.css

.about-page {
    background-color:white;
    min-height: 100vh;
}
#test {
    text-align: center;
    background-color: #B6C8A9;
    padding: 0.01%;
}

h1 {
    color: #160C28;
    font-family: Arial;
}

Answer 2

The way you have different colors for different components is to use styled-components. You then wrap your components with that styled component. Here is an example:

import styled from 'styled-components'
import style from 'styled-components'


const Div = styled.div`
    background-color:#FF7759;

 `

const Container = style.div`
    background-color:#000000;

`


function Example() {
    return (
        <div>
            <Div>
                < Portfolio />
            </Div>

            <Container>
                 < Portfolio />
            </Container>

         </div>
    )
}

Answer 3

use style={{ inline css}} props to parent div

example:

    <div style={{backgroundColor:'color name here '}}>