useStyled

useStyled用在组件中动态生成样式，函数签名如下：

function useStyled<Props=any>(styles: CSSRuleObject<Props> | (()=>CSSRuleObject<Props>),options?:StyledOptions):StyledObject

使用方式如下:

tsx

import { useStyled } from "flexstyled"

export const Card:React.FC<React.PropsWithChildren<CardProps>> = (props:CardProps)=>{
    const { title } = props
    const [titleColor,setTitleColor] = useState("blue")
    const {className,getStyle } =  useStyled(
      {
        // 此处是组件样式
      },
      [
          // 此处是组合样式
      ],
      { 
        // 此处是配置参数 
      }
    )
    return (
      <div className={className} style={getStyle(props,{"--title-color":titleColor})}>
        <div className="title">            
            <span>{title}</span>
            <span className="tools"><button onClick={()=>setTitleColor(getRandColor())}>Change</button></span>
        </div>
        <div className="content">          
            {props.children}
        </div>
        <div className="footer">{props.footer}</div>
      </div>
    )
  }

说明：

useStyled钩子返回className和getStyle,用来注入样式类名和动态样式。
getStyle函数支持传入更新css变量或内联样式。如果使用到props动态样式，则需要传入props参数。
useStyled钩子支持传入options参数来配置id和className。
useStyled与styled函数功能一样，唯一的区别是useStyled在head注入的样式表在组件卸载时会自动移除。

useStyled ​

useStyled