大家好，很高兴又见面了，我是"高级前端‬进阶‬"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发，您的支持是我不断创作的动力。

什么是 RestyleThe simplest way to add CSS styles to your React components.

restyle 号称是将 CSS 样式添加到 React 组件的最简单方法，典型特征包括：

静态渲染时的零运行时生成原子类名、删除重复样式适用于服务器和客户端组件兼容 Suspense 和流媒体支持带有 JSX pragma 的 css prop按需加载样式，允许在 NPM 包中发送 CSS体积小，核心代码 gzip 压缩后只有 1.38kb

值得注意的是，Restyle 需要 React Canary 版本，因为其利用了新样式提升功能 (style hoisting feature)。

目前 Restyle 在 Github 通过 MIT 协议开源，是一个值得关注的前端开源项目。

如何使用 Restyle

Restyle 利用 React 的新功能，通过按需生成原子 CSS 来提升样式元素，为 React 组件提供灵活高效的样式解决方案。以下是其运作方式的高级概述：

样式解析：Restyle 获取 CSS 的样式对象并对其进行解析，为每个唯一的样式属性和值对生成原子类名：import {css} from 'restyle'const [classNames, styleElement] = css({ padding: '1rem', backgroundColor: 'peachpuff',})// 输出值如下//Names: 'x1y2 x3z4'// styleElement: <style>.x1y2{padding:1rem}.x3z4{background-color:peachpuff}</style>类名生成和重复数据删除：使用哈希函数生成原子类名，以确保唯一性并防止冲突。类名按请求缓存，优化性能并减少生成的 CSS 的总体大小：import {css} from 'restyle'const [classNames] = css({ padding: '1rem', backgroundColor: 'tomato',})// 示例输入: 'x1y2 xfg3'原子 CSS：通过将样式分解为原子单元，允许高度可重用的类名，从而可以轻松管理和覆盖样式，同时减少生成的 CSS 的整体大小：import {css} from 'restyle'const styles = { padding: '1rem', backgroundColor: 'rebeccapurple',}const [classNames, styleElement] = css(styles)//Names 的值: 'x1y2 x4z1'// 其他元素也会重用该类名const buttonStyles = { ...styles, border: '1px solid black',}const [buttonClassNames, buttonStyleElement] = css(buttonStyles)// buttonClassNames 的值'x1y2 x4z1 x5a6'按需样式注入：样式仅在渲染组件或元素时添加到 DOMimport {css} from 'restyle'export default function OnDemandStyles() { const [classNames, styleElement] = css({ padding: '1rem', backgroundColor: 'papayawhip', }) return ( <> <divName={classNames}>Hello World</div> {styleElement} </> )}与 JSX Pragma 集成：通过 JSX pragma 轻松添加对 css prop 的支持，允许直接在 JSX 元素上并置内联 CSS 样式。/** @jsxImportSource restyle */export default function MyComponent() { return ( <div css={{ padding: '1rem', backgroundColor: 'peachpuff', }} > Hello World </div> )}

更多关于 Restyle 的用法和示例可以参考文末资料，本文不再过多展开。

参考资料

https://github.com/souporserious/restyle

https://reactstyle.vercel.app/

https://x.com/souporserious/status/1792947141436113127

https://www.freecodecamp.org/news/best-css-frameworks-for-frontend-devs/