React的样式
目录
import React, { PureComponent } from 'react'
export default class App extends PureComponent {
constructor(props) {
super(props);
this.state = {
color: "orange"
}
}
render() {
const pStyle = {
color: this.state.color,
textDecoration: 'underline'
}
return (
<div>
<h2 style={{ fontSize: '25px', color: 'pink' }}>我是一个标题</h2>
<p style={pStyle}>我是一个段落</p>
</div>
)
}
}
import React, { Fragment, PureComponent } from 'react'
import {
HomeWrapped,
TitleWrapped
} from './style'
export default class Home extends PureComponent {
render() {
return (
<Fragment>
<HomeWrapped>
<TitleWrapped className="title">我是Home的标题</TitleWrapped>
<div className="banner">
<span>轮播图1</span>
<span>轮播图2</span>
<span className='active'>轮播图3</span>
</div>
</HomeWrapped>
</Fragment>
)
}
}
使用styled-components
import styled from 'styled-components';
export const HomeWrapped = styled.div`
/* 因为 h2标签的font-size是 1.5em 所以比较大 */
font-size: 18px;
color: pink;
.banner {
background-color: skyblue;
}
span {
color: #fff;
&.active {
color: red;
}
&:hover {
color: orange;
}
&::after {
content: "czm"
}
}
`
export const TitleWrapped = styled.h2`
text-decoration: underline;
`
styled-components 传递参数
import React, { Fragment, PureComponent } from 'react'
import styled from 'styled-components';
const HYInput = styled.input.attrs({
placeholder: 'czm',
bColor: 'red',
})
`
outline: none;
background-color: lightblue;
border-color: ${props => props.bColor};
color: ${props => props.co}
`
export default class Profile extends PureComponent {
constructor(props) {
super(props);
this.state = {
color: 'red'
}
}
render() {
return (
<Fragment>
<HYInput type='text' co={this.state.color}/> <br/>
<input type='password'/>
<h2 className='title'>我是profile的标题</h2>
<ul className='setting'>
<li>设置列表1</li>
<li>设置列表2</li>
<li>设置列表3</li>
</ul>
</Fragment>
)
}
}
styled-components 属性的继承
import React, {PureComponent } from 'react'
import styled, {ThemeProvider} from 'styled-components'
import Home from '../Home/home'
import Profile from '../Profile/profile'
const HYButton = styled.button`
padding: 10px 20px;
border-color: red;
color: pink;
cursor: pointer;
`
const HYButtonUp = styled(HYButton)`
color: #fff;
background-color: skyblue;
`
export default class App extends PureComponent {
render() {
return (
<Home/>
<hr/>
<Profile/>
<HYButton>普通按钮</HYButton> <br/>
<HYButtonUp>升级按钮</HYButtonUp>
)
}
}