新鲜出炉:小巧优雅的 css-in-js库StyledFc

StyledFc

一个简单的运行时css-in-js库,用于封装react组件

  • 零依赖
  • 非常小,< 3kb.
  • 运行时生成css
  • 支持css变量
  • 支持类似less的嵌套css样式
  • 支持props动态css
  • 支持typescript

在线演示 | Github

安装

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 = styled<CardProps>((props,{className})=>{const { title,children,footer} =propsreturn (<div  className={className}><div className="title">            {title}</div><div className="content">{children}</div><div className="footer">{footer}</div></div>)},{ // 组件样式position:"relative",width:"100%",border:"1px solid #ccc",borderRadius:"4px" })
  • 以上代码将创建一个Card组件,为样式生成一个样式类(名称是随机生成的)并插入到head标签中。
  • 然后将className属性传递给组件,组件将使用这个类名来应用样式。

实际上,你可以在head发现一个类似这样的CSS样式,其中的类名style.id均是自动生成的。也可以通过options参数来指定styleIdclassName

<style id="6rxqfu">
.sw6y3s4{position:relative;width:100%;border:1px solid #ccc;border-radius:4px;
}
</style>

嵌套样式

接下来我们来为Card组件的titlefooter添加样式.

export const Card = styled<CardProps>((props,{className})=>{const { title,children,footer} =propsreturn (<div  className={className}><div className="title">            {title}</div><div className="content">{children}</div><div className="footer">{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"}})
  • 以上我们为titlefooter添加了样式。
  • 使用&符号来表示当前父类元素,使用的方式与lesssass等嵌套CSS的语法类似。

head生成的样式如下:

<style id="6rxqfu">
.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 = styled<CardProps>((props,{className,getStyle})=>{const { title,children,footer} =propsreturn (<div  className={className} style={getStyle()}><div className="title">            {title}</div><div className="content">{children}</div><div className="footer">{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 = styled<CardProps>((props,{className,getStyle})=>{const { title,children,footer} =propsconst [primaryColor,setPrimaryColor] = React.useState("blue")return (<div className={className} style={getStyle({"--primary-color":primaryColor})}><div className="title">            {title}<button onClick={()=>setPrimaryColor('red')}></div><div className="content">{children}</div><div className="footer">{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-colorcss变量。
  • 然后我们在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.FC<React.PropsWithChildren<CardProps>> = ((props:CardProps)=>{const { title } = propsconst [titleColor,setTitleColor] = useState("blue")const {className,getStyle } =  useStyle({// 此处是组件样式})return (<div className={className} style={getStyle({"--title-color":titleColor},props)}><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>)})
  • useStyle钩子返回classNamegetStyle,用来注入样式类名和动态样式。
  • getStyle函数支持传入更新css变量。如果使用到props动态样式,则需要传入props参数。
  • useStyle钩子支持传入options参数来配置styleIdclassName
  • useStylestyled函数功能一样,唯一的区别是useStylehead注入的样式表在组件卸载时会自动移除。

配置

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:Record<string,string | number> // 获取动态css样式,当使用props动态css时需要使用getStyle注入css样式对象,例如style={getStyle()}getStyle : ()=>Record<string,string | number>
}export type StyledComponent<Props> = (props:React.PropsWithChildren<Props>,params:StyledComponentParams)=>React.ReactElementstyled<Props>(FC: StyledComponent<Props>,styles:CSSObject,options?:StyledOptions)

在线演示 | Github

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/700151.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

matplotlib绘图初步

文章目录 绘制曲线图完整流程图像属性 绘制曲线图 matplotlib是python中最常用的可视化库&#xff0c;提供了不同坐标系下的二十余种常用图像&#xff0c;并且提供了动态图像绘制的方法&#xff0c;可以满足科学计算中的绝大多数可视化需求。而在matplotlib中&#xff0c;绝大…

HTML5和CSS3提高

一、HTML5的新特性 增加了一些新的标签&#xff0c;新的表单&#xff0c;新的表单属性&#xff0c;IE9以上版本的浏览器才支持 注意&#xff1a; 这些语义化标准主要针对搜索引擎的 新标签可以使用多次 在IE9中需要把这些元素转化为块级元素 新增的多媒体标签 主要包含两个…

iOS面试:3.Object-C相关

一、OC 是动态类型语言吗&#xff1f;OC 是强类型语言吗&#xff1f;为什么&#xff1f; Objective-C (OC) 是一种动态类型语言&#xff0c;同时也是一种强类型语言。 动态类型语言&#xff1a; 在动态类型语言中&#xff0c;变量的类型是在运行时确定的&#xff0c;而不是在编…

PPT复制粘贴后背景变没了怎么处理

目录 1.问题描述&#xff1a;2.解决方法&#xff1a;小结&#xff1a; 1.问题描述&#xff1a; 把一个ppt中的一张ppt粘贴到另一个ppt中&#xff0c;背景变没了&#xff0c;如下所示&#xff1a; 复制&#xff1a; 粘贴&#xff1a; 2.解决方法&#xff1a; 粘贴完后点击 保…

vscode 如何连接 WSL (不能通过 IP 地址连接)

来源&#xff1a;https://www.cnblogs.com/wxdblog/p/17234342.html vscode (remote-ssh) 连接 WSL 不能使用 IP地址 连接&#xff0c;需要安装 WSL 扩展才行

React18源码: task任务调度和时间分片

任务队列管理 调度的目的是为了消费任务&#xff0c;接下来就具体分析任务队列是如何管理与实现的 在 Scheduler.js 中&#xff0c;维护了一个 taskQueue, 任务队列管理就是围绕这个 taskQueue 展开 // Tasks are stored on a min heap var taskQueue - []; var timerQueue …

yolov9目标检测报错AttributeError: ‘list‘ object has no attribute ‘device‘

最近微智启软件工作室在运行yolov9目标检测的detect.py测试代码时&#xff0c;报错&#xff1a; File “G:\down\yolov9-main\yolov9-main\detect.py”, line 102, in run pred non_max_suppression(pred, conf_thres, iou_thres, classes, agnostic_nms, max_detmax_det) Fil…

Linux奇技淫巧之-使用setarch 禁止地址空间随机化

先来看这样一个代码&#xff1a; #include <stdio.h> #include <stdlib.h> #include <unistd.h>int main() {int *p (int*)malloc(sizeof(int));*p 0;while(1){printf("[%d]addr: %p, value: %d\n", getpid(), p, *p);*p *p 1;sleep(1);}retu…

猫头虎分享已解决Bug || ValueError: Data cardinality is ambiguous ‍

博主猫头虎的技术世界 &#x1f31f; 欢迎来到猫头虎的博客 — 探索技术的无限可能&#xff01; 专栏链接&#xff1a; &#x1f517; 精选专栏&#xff1a; 《面试题大全》 — 面试准备的宝典&#xff01;《IDEA开发秘籍》 — 提升你的IDEA技能&#xff01;《100天精通鸿蒙》 …

gem5学习(25):用于异构SoC的片上网络模型——Garnet2.0

目录 一、Invocation 二、Configuration 三、Topology 四、Routing 五、Flow Control 六、Router Microarchitecture 七、Buffer Management 八、Lifecycle of a Network Traversal 九、Running Garnet2.0 with Synthetic Traffic 官网教程&#xff1a;gem5: Garnet 2…

使用Python制作进度条有多少种方法?看这一篇文章就够了!

前言 偶然间刷到一个视频&#xff0c;说到&#xff1a;当程序正在运算时&#xff0c;会有一个较长时间的空白期&#xff0c;谁也不知道程序运行的进度如何&#xff0c;不如给他加个进度条。 于是我今个就搜寻一下&#xff0c;Python版的进度条都可以怎么写&#xff01; 送书…

多线程和并发

线程 进程&#xff1a;在操作系统中运行的程序&#xff0c;一个进程可以包含多个线程 程序就是指令和数据的有序集合&#xff0c;静态概念 进程就是执行程序的一次执行过程&#xff0c;动态概念系统资源分配的单元 一个进程中包含多个线程&#xff0c;一个进程至少包含一个线…

大蟒蛇(Python)笔记(总结,摘要,概括)——第9章 类

目录 9.1 创建和使用类 9.1.1 创建Dog类 9.1.2 根据类创建实例 9.2 使用类和实例 9.2.1 Car类 9.2.2 给属性指定默认值 9.2.3 修改属性的值 9.3 继承 9.3.1 子类的_init_()方法 9.3.2 给子类定义属性和方法 9.3.3 重写父类中的方法 9.3.4 将实例用作属性 9.3.5 模拟实物 9.…

现货黄金中短线投资该怎么做?

要明确什么是现货黄金的中短线投资&#xff0c;中短线投资是指在短期内&#xff08;一般为几天至几周&#xff09;对现货黄金进行买卖操作&#xff0c;以期获得收益的投资方式。相较于长线投资&#xff0c;中短线投资的风险相对较大&#xff0c;但同时收益也更为可观。那么&…

深入探究 JVM 频繁 Full GC 的排查过程

1. 引言 在当今软件开发领域&#xff0c;Java语言以其跨平台性、面向对象、高性能等特点成为了广泛应用的首选之一。而Java应用程序的核心执行环境就是Java虚拟机&#xff08;JVM&#xff09;&#xff0c;它负责将Java字节码翻译成机器码并执行&#xff0c;是Java程序运行的基…

二手货wordpress企业网站主题模板

二手车wordpress主题模板 简洁的二手车wordpress主题模板&#xff0c;适合做二手车业务的公司官方网站使用。 https://www.jianzhanpress.com/?p3473 wordpress二手物资回收主题 绿色wordpress二手物资回收主题&#xff0c;用于二手物资回收公司WP建站使用。 https://www.…

自动化行业文件数据\资料防泄密软件——天锐绿盾|@德人合科技

天锐绿盾是一款自动化行业文件数据防泄密软件&#xff0c;由德人合科技提供。该软件采用动态加解密技术&#xff0c;能够有效防止公司内部数据泄密&#xff0c;同时支持各种文件格式加密&#xff0c;如CAD、OFFICE、PDF、图纸等。 PC端&#xff1a;https://isite.baidu.com/sit…

git如何保留提交记录的情况下迁移

Git仓库迁移方案 在日常的工作场景中&#xff0c;我们有时候会遇到需要更换Git仓库地址的需求。或者是从一个git仓库托管工具换到另一个git仓库托管工具。这个时候有两种方案&#xff1a; 方案一&#xff1a;不保留历史提交记录 如果你不需要保留原有的历史提交记录&#xf…

Linux RocketMQ 安装及卸载(附控制台搭建)

一、前言 在安装 RocketMQ 前需要确保 JDK 已安装并正确配置环境变量 二、下载安装 1.下载 下载 | RocketMQ 2.安装 # 打开存放目录 cd /usr/local # 创建目录 mkdir rocketMQ # 进入目录 cd rocketMQ # 把下载的压缩包上传到 rocketMQ 目录中 # 解压 $ unzip rocketmq-all-…

备战蓝桥杯 Day12(二维费用背包+分组背包)

二进制分解多重背包 269&#xff1a;【例9.13】庆功会 【题目描述】 为了庆贺班级在校运动会上取得全校第一名成绩&#xff0c;班主任决定开一场庆功会&#xff0c;为此拨款购买奖品犒劳运动员。期望拨款金额能购买最大价值的奖品&#xff0c;可以补充他们的精力和体力。 #inc…