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会一股脑的将这些都传递给这个组件。

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值