新鲜出炉:小巧优雅的 css-in-js库StyledFc
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 = 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参数来指定styleId和className。
<style id="6rxqfu">
.sw6y3s4{position:relative;width:100%;border:1px solid #ccc;border-radius:4px;
}
</style>
嵌套样式
接下来我们来为Card组件的title和footer添加样式.
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"}})
- 以上我们为
title和footer添加了样式。 - 使用
&符号来表示当前父类元素,使用的方式与less和sass等嵌套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-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.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钩子返回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: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)相关文章:
新鲜出炉:小巧优雅的 css-in-js库StyledFc
StyledFc 一个简单的运行时css-in-js库,用于封装react组件 零依赖非常小,< 3kb.运行时生成css支持css变量支持类似less的嵌套css样式支持props动态css支持typescript 演示 安装 pnpm add styledfc # or npm install styledfc # or yarn add styl…...
Python编程实验四:函数的使用
目录 一、实验目的与要求 二、实验内容 三、主要程序清单和程序运行结果 第1题 第2题 第3题 第4题 第5题 四、实验结果分析与体会 一、实验目的与要求 (1)通过本次实验,学生应掌握函数的定义与调用的基本语法,能根据需要…...
SVN服务备份
hotcopy备份 window批处理 保存以下内容到svn_buckup.bat,确保内容的路径正确,最后双击bat文件进行备份即可 echo offrem SVN安装路径 set svn"C:\Program Files\VisualSVN Server\bin"rem 仓库根目录 set homeE:\Repositories\WorkSpacere…...
FIDO2入门以及相关概念 Client to Authenticator Protocol
本文根据官方文档的定义以及我疑惑的问题做出的相关整理的问答,可能会有偏差,请以官网为准。 官网文档网址:Client to Authenticator Protocol (CTAP) FIDO是什么 FIDO(Fast Identity Online)是一组开放标准和…...
Linux系统入门:嵌入式系统的操作系统选型
(本文为简单介绍,内容来源网络和AI模型生成) Linux是一种开源的操作系统,它建立在Unix操作系统的基础之上,采用了Unix的很多理念和设计思想。与商业操作系统如Windows相比,Linux系统资源占用少,运行高效稳定,且Linux系统免费开源,使用和传播…...
数据结构——时间复杂度
前言: 当谈到数据结构和算法时,时间复杂度是一个至关重要的概念。时间复杂度是衡量算法执行时间随输入规模增长而变化的度量,它指示了算法的效率和性能。在本篇博客中,我们将深入探讨时间复杂度的相关知识,并结合C语言…...
《剑指Offer》笔记题解思路技巧优化 Java版本——新版leetcode_Part_5
《剑指Offer》笔记&题解&思路&技巧&优化_Part_5 😍😍😍 相知🙌🙌🙌 相识😢😢😢 开始刷题🟢1. LCR 158. 库存管理 II——数组中出现次数超过一…...
ubuntu上安装docker
在 Ubuntu 上安装 Docker,可以按照以下步骤进行操作: 更新软件包列表:运行以下命令来更新系统的软件包列表: sudo apt update安装必要的依赖项:运行以下命令来安装 Docker 所需的依赖项: sudo apt install …...
【Docker】Linux主机部署Docker
Docker部署 1.二进制文件部署 到如下地址,下载二进制包。 Docker官网:https://docs.docker.com/engine/install/binaries/ 网易镜像源:https://mirrors.163.com/docker-ce/linux/static/stable/x86_64/ 下载好的二进制包上传到主机…...
vue前端docx库生成word表格 并合并单元格的例子
Vue.js 是一个流行的前端JavaScript框架,用于构建用户界面和单页应用程序。在Vue中生成Word表格并合并单元格,通常需要使用额外的库,如docx,它是一个用于创建和修改Word文档(.docx)的JavaScript库。 …...
FastGPT配置文件及OneAPI程序:
FastGPT配置文件及OneAPI程序:百度网盘 请输入提取码 提取码:wuhe 创建fastgpt目录:mkdir fastgpt 切换到fastgpt目录:cd fastgpt 下载docker-compose文件:curl -O https://raw.githubusercontent.com/labring/Fast…...
Positive Semidefinite Matrices 什么是半正定矩阵?(undone)
参考视频:https://www.bilibili.com/video/BV1Vg41197ew/?vd_source7a1a0bc74158c6993c7355c5490fc600 参考资料(半正定矩阵的定义):https://baike.baidu.com/item/%E5%8D%8A%E6%AD%A3%E5%AE%9A%E7%9F%A9%E9%98%B5/2152711?frge_ala 看看半正定矩阵的…...
shapely 笔记:STR TREE
数据结构笔记:R树-CSDN博客 1 基本介绍 使用Sort-Tile-Recursive (STR) 算法创建的仅查询的R-tree空间索引该树索引每个几何图形的边界框。树在初始化时直接构建,且一旦创建后不能添加或移除节点所有操作返回输入几何图形的索引边界框限于二维并且是轴…...
neo4j常用代码
1】查版本: CALL dbms.components() YIELD name, versions RETURN name, versions; 2】清数据: MATCH ()-[r]->() DELETE r; MATCH (n) DETACH DELETE n; 3】NEO4J 操作入门_neo4j查看历史执行命令-CSDN博客 :play --首页 :help match/keys/com…...
OpenAI划时代大模型——文本生成视频模型Sora作品欣赏(五)
Sora介绍 Sora是一个能以文本描述生成视频的人工智能模型,由美国人工智能研究机构OpenAI开发。 Sora这一名称源于日文“空”(そら sora),即天空之意,以示其无限的创造潜力。其背后的技术是在OpenAI的文本到图像生成模型DALL-E基础上开发而成的。模型的训练数据既包含公开…...
Less预处理器教程
学习源码可以看我的个人前端学习笔记 (github.com):qdxzw/frontlearningNotes 觉得有帮助的同学,可以点心心支持一下哈 一、Less介绍 less官方文档 lesscss.org/ less中文文档 less.bootcss.com/ less是一种css预处理器,它扩展了css语言,…...
PCL 计算点云AABB包围盒的体积
目录 一、AABB包围盒二、代码实现三、结果展示四、相关链接本文由CSDN点云侠原创,原文链接。爬虫自重,把自己当个人。 一、AABB包围盒 AABB包围盒又称了 轴对齐包围盒,是点云包围盒里最简单的一种,其计算方法也极其简单。获取包围盒之后,根据包围盒的长宽高进行体积计算即…...
论软件测试工程师 重要性!
在生活中,我们常常会遇到以下几种窘迫时刻: 准备骑共享单车出行,却发现扫码开锁半天,车子都没有反应;手机导航打车,却发现地图定位偏差很大,司机总是跑错地方;买个水,却…...
防御第六次作业-防火墙综合实验(av、url过滤、dns过滤)
目录 拓扑图: 要求: 8 9 10 11 拓扑图 要求 前7个要求在上一篇博客; 8.分公司内部的客户端可以通过域名访问到内部的服务器 9.假设内网用户需要通过外网的web服务器和pop3邮件服务器下载文件和邮件,内网的FTP服务器也需要…...
打码半年,开源一款自定义大屏设计软件!
hi,大家好,我是Tduck马马。 最近我们开源了一款大屏软件-TReport,与大家分享。 TReport是一款基于Vue3技术栈的数据可视化系统,支持静态、动态api等数据源;可用于数据可视化分析、报表分析、海报设计使用。 提供自定…...
【Linux】shell脚本忽略错误继续执行
在 shell 脚本中,可以使用 set -e 命令来设置脚本在遇到错误时退出执行。如果你希望脚本忽略错误并继续执行,可以在脚本开头添加 set e 命令来取消该设置。 举例1 #!/bin/bash# 取消 set -e 的设置 set e# 执行命令,并忽略错误 rm somefile…...
云计算——弹性云计算器(ECS)
弹性云服务器:ECS 概述 云计算重构了ICT系统,云计算平台厂商推出使得厂家能够主要关注应用管理而非平台管理的云平台,包含如下主要概念。 ECS(Elastic Cloud Server):即弹性云服务器,是云计算…...
SciencePlots——绘制论文中的图片
文章目录 安装一、风格二、1 资源 安装 # 安装最新版 pip install githttps://github.com/garrettj403/SciencePlots.git# 安装稳定版 pip install SciencePlots一、风格 简单好用的深度学习论文绘图专用工具包–Science Plot 二、 1 资源 论文绘图神器来了:一行…...
MongoDB学习和应用(高效的非关系型数据库)
一丶 MongoDB简介 对于社交类软件的功能,我们需要对它的功能特点进行分析: 数据量会随着用户数增大而增大读多写少价值较低非好友看不到其动态信息地理位置的查询… 针对以上特点进行分析各大存储工具: mysql:关系型数据库&am…...
java 实现excel文件转pdf | 无水印 | 无限制
文章目录 目录 文章目录 前言 1.项目远程仓库配置 2.pom文件引入相关依赖 3.代码破解 二、Excel转PDF 1.代码实现 2.Aspose.License.xml 授权文件 总结 前言 java处理excel转pdf一直没找到什么好用的免费jar包工具,自己手写的难度,恐怕高级程序员花费一年的事件,也…...
服务器硬防的应用场景都有哪些?
服务器硬防是指一种通过硬件设备层面的安全措施来防御服务器系统受到网络攻击的方式,避免服务器受到各种恶意攻击和网络威胁,那么,服务器硬防通常都会应用在哪些场景当中呢? 硬防服务器中一般会配备入侵检测系统和预防系统&#x…...
剑指offer20_链表中环的入口节点
链表中环的入口节点 给定一个链表,若其中包含环,则输出环的入口节点。 若其中不包含环,则输出null。 数据范围 节点 val 值取值范围 [ 1 , 1000 ] [1,1000] [1,1000]。 节点 val 值各不相同。 链表长度 [ 0 , 500 ] [0,500] [0,500]。 …...
解决本地部署 SmolVLM2 大语言模型运行 flash-attn 报错
出现的问题 安装 flash-attn 会一直卡在 build 那一步或者运行报错 解决办法 是因为你安装的 flash-attn 版本没有对应上,所以报错,到 https://github.com/Dao-AILab/flash-attention/releases 下载对应版本,cu、torch、cp 的版本一定要对…...
鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个生活电费的缴纳和查询小程序
一、项目初始化与配置 1. 创建项目 ohpm init harmony/utility-payment-app 2. 配置权限 // module.json5 {"requestPermissions": [{"name": "ohos.permission.INTERNET"},{"name": "ohos.permission.GET_NETWORK_INFO"…...
OpenLayers 分屏对比(地图联动)
注:当前使用的是 ol 5.3.0 版本,天地图使用的key请到天地图官网申请,并替换为自己的key 地图分屏对比在WebGIS开发中是很常见的功能,和卷帘图层不一样的是,分屏对比是在各个地图中添加相同或者不同的图层进行对比查看。…...
