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

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

     ）

}