styled components草根中文版文档

1.styled components官网网址

https://www.styled-components.com/docs

以组件的形式来写样式。

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（）{

<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（）{

<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标签。

</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框设置一个默认值。自定义一个属性，会继承下去，很重要哦！

</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 (

<p className={styles.paragraph}>{this.state.count}</p>

</button>

</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（

hello

<span>hahah</span>

</StyleDiv>

）

}