如何为 React 应用程序中的不同组件设置不同的背景颜色？

Question

我从未使用过 React、Js 或 CSS。所以，我决定用一些额外的页面制作一个非常简单的 Portfolio 网站。我计划有三个页面 -> 主页、关于和投资组合。我的主页按我的意愿工作。我在 About 页面上工作，我意识到每当我为这个组件使用不同背景颜色的自定义 css 时，它都会使其成为每个组件的默认背景颜色。我正在使用路由从一个组件跳转到另一个组件。我认为我在 index.js 中的路由有问题。我的 index.js 如下所示，

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'))

我没有为 Portfolio 创建路线，因为我还没有开始研究它。我的 App.js 如下所示

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>
        )
    }
}

它的 css 如下所示

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);
}

我创建了一个关于组件的测试来解决这个背景颜色问题，下面是我的代码，

关于.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>
        )
    }
}

这个的 css 如下所示

About.css

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

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

在 About.css 文件中，如果我有 body{background-color: ...}，每个页面都会变成那种颜色。如果我把它拿出来，每一页都会变成 App.css 中设置的任何颜色。正如我所说，我一般是 JS、CSS 和 React 的新手。据我了解，如果我在组件中包含自定义 css，它应该只将其应用于该组件。我不知道为什么它适用于所有组件。

Answer 1

body 指的是整个网页，因此它会为所有组件所在的内容着色。此外，在添加/删除组件时，不会添加/删除 About.css 文件中的 CSS。

最简单的解决方案是让您的“关于”页面成为一个填充整个屏幕并为其着色的 div。

关于.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>
        )
    }
}

关于.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

为不同的组件设置不同颜色的方法是使用 styled-components。然后，您使用该样式组件包装您的组件。这是一个例子：

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

对父 div 使用 style={{ inline css}} 道具

示例：

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