1.styled components官网网址
以组件的形式来写样式。
1.1安装
yarn add styled-components
1.2
写法依托于ES6和webpack。
2.Getting Started万物皆组件
把样式定义在组件中
import styled from 'styled-components'
const Title = styled.h1` //h1是标签名，就是<h1></h1>
font-size: 1.5em;
text-align: center;
color: palevioletred;
`
const Wrapper = styled.section`
padding: 4em;
background: papayawhip;
`
export {
Title,
Wrapper
}
在正式文件中引入把样式定义成组件的文件。
import {Wrapper，Title} from ’......‘
class App extends Component{
render（）{
<Wrapper>
<Title>hello<Title>
</Wrapper>
}
}
3.Adapting based on props适配属性
给标签传递属性，在样式组件中去接这个属性。
import styled from 'styled-components'
const Title = styled.h1`
font-size: 1.5em;
text-align: center;
color: ${props => props.color}; //在组件内部写一个箭头函数来接收参数。通过props获得父组件传过来的参数
background: ${props => props.primary ? "palevioletred" : "white"};
`
const Wrapper = styled.section`
padding: 4em;
background: papayawhip;
`
export {
Title,
Wrapper
}
在正式文件中引入把样式定义成组件的文件。
import {Wrapper，Title} from ’......‘
class App extends Component{
render（）{
<Wrapper>
<Title color=‘red’ primary>hello<Title> //写一个属性，往样式组件中传参。
</Wrapper>
}
}
4.Extending Styles扩展样式
用途：1.继承样式，在原有的样式基础上做一些更新。
2.定义好一组样式，想把这组样式应用到另外一组样式上去。
import styled from 'styled-components'
const Button = styled.button`
color: palevioletred;
font-size: 1em;
margin: 1em;
padding: 0.25em 1em;
border: 2px solid palevioletred;
border-radius: 3px;
`
const TomatoButton = styled(Button)` //此组件继承上一个组件样式，并增加新的样式
color: tomato;
border-color: tomato;
`
export {
Button,
TomatoButton
}
在正式文件中引入把样式定义成组件的文件。
import {Button，TomatoButton} from ’......‘
class App extends Component{
render（）{
<div>
<Button as="a">按钮</Button> //as的用处是我们可以定义好一个样式组件，用as换成另外一个标签，如这个就换成了a标签。
<TomatoButton>按钮</TomatoButton>
</div>
}
}
5.Styling any components样式化很多组件
import React from 'react'
import styled from 'styled-components'
const Link = (props) => ( //普通组件，不是样式组件
<div>
<a className={props.className}> //必须写，需要用它接收一下增强的样式。
{props.children} //children可以拿到插槽里的内容
</a>
<a>
{props.children}
</a>
</div>
)
const StyledLink = styled(Link)` //给Link定义样式，给本来没有样式的组件加上样式
color: palevioletred;
font-weight: bold;
`
export {
Link,
StyledLink
}
在正式文件中引入把样式定义成组件的文件。
import {Link，StyledLink} from ’......‘
class App extends Component{
render（）{
<div>
<StyledLink>hello</StyledLink>
</div>
}
}
6.Passed props传递属性、默认属性
import styled from 'styled-components'
const Input = styled('input')`
padding: 0.5em;
margin: 0.5em;
color: ${ props => props.inputColor };
background: papayawhip;
border: none;
border-radius: 3px;
`
export {
Input
}
在正式文件中引入把样式定义成组件的文件。
import {Input} from ’......‘
class App extends Component{
constructor(){
super()
this.state ={
value:"aaa"
}
}
render（）{
<div>
<Input defaultValue={this.state.value}></Input> //给input框设置一个默认值。自定义一个属性，会继承下去，很重要哦！
<Input inputColor="rebeccapurple"></Input>
</div>
}
}
7.Coming from CSS直接引css
import React from 'react'
import styles from './styles.css'
export default class Counter extends React.Component {
state = { count: 0 }
increment = () => this.setState({ count: this.state.count + 1 })
decrement = () => this.setState({ count: this.state.count - 1 })
render() {
return (
<div className={styles.counter}>
<p className={styles.paragraph}>{this.state.count}</p>
<button className={styles.button} onClick={this.increment}>
+
</button>
<button className={styles.button} onClick={this.decrement}>
-
</button>
</div>
)
}}
8.Attaching additional props链接额外组件在props上
import styled from 'styled-components'
const StyledDiv = styled.div.attrs({ //给标签加自己的属性，但不能是自定义属性。
title: 'aaa',
id: 'bbb',
'data-src': (props) => props.hello //可以进行欲添加。
})`
font-size: 100px;
> span {
font-size: 50px;
}
& > span {
font-size: 25px;
}
`
export {
StyledDiv
}
在正式文件中引入把样式定义成组件的文件。
import {StyledDiv} from ’......‘
class App extends Component{
render（）{
return（
<StyleDiv hello="hi'>
hello
<span>hahah</span>
</StyleDiv>
）
}