CSS变量

felxstyled支持使用CSS变量，并且可以在组件中动态修改和注入css变量值。

使用方法

interface CardProps{
    padding?:number
}
const Card = styled<CardProps>((props,{className,getStyle})=>{
    const { title,children,footer} =props
    return (
      <div className={className} style={getStyle({
          // 这里可以传递一些额外的参数给动态样式
        },{  
              "--padding":props.padding   // 重载css变量
              color:'red'// 额外的内联样式
            }                             
        )}>  
        <div className="header">  {title} </div>
        <div className="body">{children}</div>
        <div className="footer">{footer}</div>
      </div>
    )
  },{ 
    position:"relative",
    width:"100%",
    "--padding": '4px',       --开头的字符串会被自动识别为css变量声明
    padding: "var(--padding)"使用CSS变量
    "& > .header":{
        padding: "var(--padding)"使用CSS变量
    }
    // ... 
  })

• 可以通过getStyle来提供重载css变量值，也可以提供额外的内联样式。

说明

• css变量声明只能声明中样式的根元素上，不能在子元素上声明.

styled({ 
    position:"relative",
    width:"100%",
    "--padding": '4px',       ✔️ 有效, 声明在根，
    "& > .header":{
        "--padding": '4px',  ❌ 无效, 声明在子元素上
    }
    // ... 
  }
})