[英]How can I have different background color for different component in a React app?
我从未使用过 React、Js 或 CSS。因此,我决定制作一个非常简单的 Portfolio 网站,并添加一些额外的页面。 我计划有三个页面 -> 主页、关于和投资组合。 我的主页按我希望的方式工作。 我在“关于”页面上工作,我意识到每当我为这个具有不同背景颜色的组件使用自定义 css 时,它会使它成为每个组件的默认背景颜色。 我正在使用路由从一个组件跳转到另一个组件。 我想我在 index.js 中做错了路由。 我的 index.js 如下所示,
索引.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 如下所示
应用程序.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 如下所示
申请.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 如下所示
关于.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,它应该只将它应用于该组件。 我不知道为什么它适用于所有组件。
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;
}
为不同的组件使用不同颜色的方法是使用样式组件。 然后,您使用该样式组件包装您的组件。 下面是一个例子:
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>
)
}
style={{ inline css}}
属性到父 div例子:
<div style={{backgroundColor:'color name here '}}>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.