网站建设布局样式,专业的深圳网站建设公司排名,cms系统总是掉线,互联网搜索引擎StyledFc
一个简单的运行时css-in-js库#xff0c;用于封装react组件
零依赖非常小#xff0c; 3kb.运行时生成css支持css变量支持类似less的嵌套css样式支持props动态css支持typescript
演示
安装
pnpm add styledfc
# or
npm install styledfc
# or
yarn add styl…StyledFc
一个简单的运行时css-in-js库用于封装react组件
零依赖非常小 3kb.运行时生成css支持css变量支持类似less的嵌套css样式支持props动态css支持typescript
演示
安装
pnpm add styledfc
# or
npm install styledfc
# or
yarn add styledfc用法
拟开发一个Card组件组件有一个title属性用于显示标题一个footer属性用于显示底部内容children属性作为卡片的内容区。
基本用法
import { styled } from styledfc export type CardProps React.PropsWithChildren{title:string footer?:string}export const Card styledCardProps((props,{className}){const { title,children,footer} propsreturn (div className{className}div classNametitle {title}/divdiv classNamecontent{children}/divdiv classNamefooter{footer}/div/div)},{ // 组件样式position:relative,width:100%,border:1px solid #ccc,borderRadius:4px })
以上代码将创建一个Card组件为样式生成一个样式类名称是随机生成的并插入到head标签中。然后将className属性传递给组件组件将使用这个类名来应用样式。
实际上你可以在head发现一个类似这样的CSS样式其中的类名和style.id均是自动生成的。也可以通过options参数来指定styleId和className。
style id6rxqfu
.sw6y3s4{position:relative;width:100%;border:1px solid #ccc;border-radius:4px;
}
/style嵌套样式
接下来我们来为Card组件的title和footer添加样式.
export const Card styledCardProps((props,{className}){const { title,children,footer} propsreturn (div className{className}div classNametitle {title}/divdiv classNamecontent{children}/divdiv classNamefooter{footer}/div/div)},{ // 组件样式position:relative,width:100%,border:1px solid #ccc,borderRadius:4px, .title:{fontSize:20px,fontWeight:bold,}, .footer:{borderTop:1px solid #ccc,padding:8px,textAlign:right}})以上我们为title和footer添加了样式。使用符号来表示当前父类元素使用的方式与less和sass等嵌套CSS的语法类似。
在head生成的样式如下
style id6rxqfu
.sw6y3s4{position:relative;width:100%;border:1px solid #ccc;border-radius:4px;
}
.sw6y3s4 .title{font-size:20px;font-weight:bold;
}
.sw6y3s4 .footer{border-top:1px solid #ccc;padding:8px;text-align:right;
}
/style动态样式
styledfc支持使用props来动态设置样式。
我们想让卡片content的背景颜色可以通过props.bgColor属性来指定。 export const Card styledCardProps((props,{className,getStyle}){const { title,children,footer} propsreturn (div className{className} style{getStyle()}div classNametitle {title}/divdiv classNamecontent{children}/divdiv classNamefooter{footer}/div/div)},{ // 组件样式position:relative,width:100%,border:1px solid #ccc,borderRadius:4px, .title:{fontSize:20px,fontWeight:bold,}, .footer:{borderTop:1px solid #ccc,padding:8px,textAlign:right}, .content:{padding:8px,backgroundColor:(props)props.bgColor}})为了支持动态属性我们需要使用getStyle函数来获取动态样式然后注入到组件的根元素中。getStyle函数返回一个css样式对象可以直接传递给style属性。任意css属性均可以使用(props){....}来动态生成CSS属性值。
CSS变量
styledfc支持使用css变量。可以在getStyle函数中传入更新后的css变量。 export const Card styledCardProps((props,{className,getStyle}){const { title,children,footer} propsconst [primaryColor,setPrimaryColor] React.useState(blue)return (div className{className} style{getStyle({--primary-color:primaryColor})}div classNametitle {title}button onClick{()setPrimaryColor(red)}/divdiv classNamecontent{children}/divdiv classNamefooter{footer}/div/div)},{ // 组件样式position:relative,width:100%,border:1px solid #ccc,borderRadius:4px,--primary-color:blue, .title:{fontSize:20px,fontWeight:bold,color:var(--primary-color)}, .footer:{borderTop:1px solid #ccc,padding:8px,textAlign:right}, .content:{padding:8px,backgroundColor:(props)props.bgColor}})以上我们在根样式中声明了一个--primary-color的css变量。然后我们在title样式中使用了--primary-color变量。getStyle函数支持传入更新css变量。
小结
默认只需要在组件引用className即可。如果需要使用props动态css属性需要使用getStyle函数来获取动态css样式并注入到根元素中。getStyle函数支持传入更新css变量。
Hook
styledfc还提供了一个useStyle钩子用于在函数组件中使用。
同样功能的Card组件可以使用useStyle钩子来实现。
import { useStyle } from styledfc
export const Card2:React.FCReact.PropsWithChildrenCardProps ((props:CardProps){const { title } propsconst [titleColor,setTitleColor] useState(blue)const {className,getStyle } useStyle({// 此处是组件样式})return (div className{className} style{getStyle({--title-color:titleColor},props)}div classNametitle span{title}/spanspan classNametoolsbutton onClick{()setTitleColor(getRandColor())}Change/button/span/divdiv classNamecontent {props.children}/divdiv classNamefooter{props.footer}/div/div)})useStyle钩子返回className和getStyle,用来注入样式类名和动态样式。getStyle函数支持传入更新css变量。如果使用到props动态样式则需要传入props参数。useStyle钩子支持传入options参数来配置styleId和className。useStyle与styled函数功能一样唯一的区别是useStyle在head注入的样式表在组件卸载时会自动移除。
配置
styledfc支持以下options参数来配置。
// styled(React.FC,styles,options)
export interface StyledOptions{// 样式表的ID,没有指定则会自动生成styleId?:string // 生成的样式类名如果没有指定则自动生成 className?:string
}API
export interface StyledOptions{// 生成的样式表id如果没有指定则自动生成styleId?:string // 生成的css类名如果没有指定则自动生成className?:string
}
export type StyledComponentParams {// 生成的css类名className:string// 生成的样式表idstyleId:string// css变量vars:Recordstring,string | number // 获取动态css样式当使用props动态css时需要使用getStyle注入css样式对象例如style{getStyle()}getStyle : ()Recordstring,string | number
}export type StyledComponentProps (props:React.PropsWithChildrenProps,params:StyledComponentParams)React.ReactElementstyledProps(FC: StyledComponentProps,styles:CSSObject,options?:StyledOptions)
