style-components的熟练运用

安装

首先下一个包：

npm install --save styled-components

使用

创建组价以及根据属性加样式

import React ,{Component} from 'react'
import styled from 'styled-components';
const Btn=styled.div`
    width:200px;
    height:200px;
    background:skyblue
    ${props=>`color:${props.primary?"white":"red"}`}
    border:${props=>props.black?"solid 3px black":""}
`
// 基本样式  以及根据属性加样式
class Example extends Component{
    render(){
        return (
            <div>
                <Btn primary black>22</Btn>
            </div>
        )
    }
}
export default Example;

上面样例中介绍了，如和建立一个样式组件，如何根据组建的属性来添加样式。

添加动画和根据属性值写样式

import React, { Component } from 'react'
import styled,  {keyframes } from 'styled-components'
import { Wrapper } from './commons'
//定义一个动画
const rotate = keyframes`
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(180deg);
    }
`
const Input = styled.input.attrs({
    type: props => props.password ? 'password' : 'text'
})`
    color: palevioletred;
    font-size: 1em;
    border: 2px solid palevioletred;
    border-radius: 3px;
    //使用动画
    animation: ${rotate} 2s;
    /* here we use the dynamically computed props */
    //根据属性的值来写样式
    padding: ${props => props.padding};
`;
class Example extends Component {
    render () {
        return (
            <Wrapper>
               <Input padding="10px" placeholder = "请输入..."/>
            </Wrapper>
        )
    }
}

export default Example

（注释写的很明白）

样式继承和as的使用

import React, { Component } from 'react'
import styled from 'styled-components'
import { Wrapper } from './commons'
const Button = styled.button`
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
  /* ${ props =>`background: ${props.primary ? 'palevioletred' : 'white'}` }   */

  background: ${props => props.primary ? "palevioletred" : "white"};
  color: ${props => props.primary ? "white" : "palevioletred"};

`
const TomatoButton = styled(Button)`
    color: tomato;
    border-color: tomato;
`

const Revserse = props => {
    return <button {...props}>
        {props.children.split('').reverse().join('')}
    </button>
}
class Example extends Component {
    render () {
        return (
            <Wrapper>
                <Button>outline</Button>
                <TomatoButton as = "a">outline</TomatoButton>
                {/* 如果as的是一个组件，真正渲染的就是as的组件 */}
                <TomatoButton as = {Revserse} >今天是个好日子</TomatoButton>
            </Wrapper>
        )
    }
}
export default Example

（注释写的很明白）style componnet 如果处理的是tag，就会将自身身上的所有的属性都给dom加上（dom能识别的），如果处理的是一个组件，styleComponent会一股脑的将这些都传递给这个组件。