封装组件

styled可以用于封装React组件，返回一个styled的React高阶组件。

import { styled } from 'flexstyled'

interface StyledButtonProps {
    type?: 'primary' | 'secondary'
}
const StyledButton = styled<StyledButtonProps>((props,{className,getStyle})=>{ 
     // 没使用到动态样式和CSS变量时
    return <button className={btnStyle.className} />  
    // 用到动态样式时需要传入
    return <button className={btnStyle.className} style={btnStyle.getStyle(props)} /> 
    // 用到动态样式时或传入CSS变量
    return <button className={btnStyle.className} style={btnStyle.getStyle(props,{  
        "--my-color":'blue'
    })} /> 
},{
    display        : 'inline-block',
    padding        : '0 10px',
    borderRadius   : '4px',
    cursor         : 'pointer',
    color          : 'var(--my-color)', 
    "--my-color"   : 'red',
    backgroundColor: (props)=>props.type=='primary' ? 'blue' : 'white',
    '&:hover':{
        backgroundColor:'#eee'
    }
})

也可以使用 styled 的简化方式给 StyledButton 组件的根元素添加className和style属性。

const StyledButton = styled<StyledButtonProps>((props,{getProps})=>{ 
    return <button  {...getProps({props})} />
},{...})

说明

• 执行styled函数均会将创建的CSS样式注入到DOM Head中。