yarn add styled-components
------------
1
import styled from ‘styled-components‘
export const HomeWrapper = styled.div `
font-size:20px;
color:red;
.banner{
background:#999;
span{
color: #fff;
&.active{
color: orange;
}
&:hover{
color:green;
}
&::after{
content: ‘aa‘;
}
}
}
`
export const TitleWapper = styled.h2 `
text-decoration:underline;
font-size:25px;
`
import React, { PureComponent } from ‘react‘
import {
HomeWrapper,
TitleWapper
} from ‘./style‘
export default class Home extends PureComponent {
render() {
return (
<HomeWrapper>
<TitleWapper>我是home标题</TitleWapper>
<div className="banner">
<span>轮播图1</span>
<span className="active">轮播图2</span>
<span>轮播图3</span>
<span>轮播图4</span>
</div>
</HomeWrapper>
)
}
}
-------------------
2
import React, { PureComponent } from ‘react‘
import styled from ‘styled-components‘
/**
* 1 props 穿透
* 2 attrs 的使用
* 3 传入state 作为 props 属性
*/
export const HyInput = styled.input.attrs({
placeholder:"Eric",
bColor:"red"
}) `
background-color: lightblue;
border-color: ${props => props.bColor};
/* 动态获取样式 */
color: ${props => props.color};
`
export default class Profile extends PureComponent {
constructor(props){
super(props);
this.state = {
color:"gold"
}
}
render() {
return (
<div>
<HyInput type="text" color = {this.state.color} />
<h2 >我是Profile标题</h2>
<ul >
<li>设置列表1</li>
<li>设置列表2</li>
<li>设置列表3</li>
</ul>
</div>
)
}
}
-------------------------
3
import React, { PureComponent } from ‘react‘
import Home from ‘../home‘
import Profile from ‘../profile‘
import styled,{ThemeProvider} from ‘styled-components‘
const HYButton = styled.button`
padding: 10px 20px ;
color: #fff;
`
const HYp = styled.p`
color: ${props => props.theme.themeColor};
font-size: ${props => props.theme.fontSize};
`
// 样式继承
const HYPrimaryButton = styled(HYButton)`
background-color: #5082ff;
`
export default class App extends PureComponent {
render() {
return (
<ThemeProvider theme={{themeColor:"skyblue",fontSize:"30px"}}>
<Home />
<hr />
<Profile />
<HYp className="themeTitle">主题设置</HYp>
<HYButton> 普通按钮 </HYButton>
<HYPrimaryButton> 主要按钮 </HYPrimaryButton>
</ThemeProvider>
)
}
}