Styled-Components使用

网址：www.styled-components.com/

安装：npm install --save styled-components

需要渲染的Dom元素
import React, { Component,Fragment } from 'react'
import {Contener,ExtendContener} from './style'
 class Tabber extends Component {
     render() {
        return (
            <Fragment>
                <Contener>hello
                    <span>world</span>
                </Contener>
                <ExtendContener  bordertype='solid'>234
                    <span>678</span>
                </ExtendContener>
            </Fragment>
        )
    }
}
 export default Tabber
 
引入：import  Styled from 'styled-components'
利用attrs设置自定义类名
const Contener =Styled.div.attrs({
    title:'nihao'
 })`
    color:red;
span{
    color:blue;
}
 //继承（加强）
const ExtendContener =Styled(Contener)`
    /* 组件传参接受 */
    border:2px ${props => props.bordertype} #f00;
`
export {
  Contener,
  ExtendContener
}

`