styled-components：用 JS 写 CSS，React 样式这块它干了十年

文章目录styled-components用 JS 写 CSSReact 样式这块它干了十年1、 到底解决了什么问题2、 长什么样3、 该有的都有4、 实际用起来怎么样5、 谁在用styled-components用 JS 写 CSSReact 样式这块它干了十年styled-components 在 GitHub 上已经拿到 41K Star 了。2016 年出来的专门解决 React 里写 CSS 的各种别扭。到现在十年了依然是 React 生态里用得最多的 CSS-in-JS 方案之一。1、 到底解决了什么问题React 组件化开发有个老毛病样式怎么管。写全局 CSS类名冲突是家常便饭改个按钮颜色得全局搜一遍生怕漏掉。CSS Modules 解决了作用域问题但写起来还是要在 JS 和 CSS 文件之间来回跳。BEM 命名法能用但那一长串类名写多了谁都烦。styled-components 的思路很直接把 CSS 直接写在 JS 组件里每个组件自带样式自动生成唯一的类名不用操心命名冲突不用维护单独的样式文件。2、 长什么样用法很直观。用 tagged template literal 定义一个组件里面写 CSSconstButtonstyled.buttonbackground: palevioletred; color: white; padding: 0.5em 1em; border-radius: 4px;;这个 Button 就是一个带样式的 React 组件直接当 JSX 用就行。想根据 props 改样式插个函数进去constButtonstyled.buttonbackground:${propsprops.$primary?palevioletred:white}; color:${propsprops.$primary?white:palevioletred};;传个$primary属性按钮就变色。$前缀是 transient prop不会被传到 DOM 节点上。还能继承constTomatoButtonstyled(Button)background: tomato; border-color: tomato;;在 Button 基础上改个颜色新的组件就出来了。3、 该有的都有伪类、伪元素、嵌套选择器直接用引用当前组件的类名constInputstyled.inputborder: 1px solid #ccc; :focus { border-color: palevioletred; outline: none; } ::placeholder { color: #aaa; };媒体查询、动画关键帧、全局样式CSS 支持的它基本都支持。主题系统用 ThemeProvider 包一层所有子组件通过props.theme拿到设计变量consttheme{fg:palevioletred,bg:white};ThemeProvider theme{theme}Card内容/Card/ThemeProvider还有个createTheme方法把设计变量转成 CSS 自定义属性做亮色/暗色主题切换的时候类名哈希值保持稳定不会出现 hydration 不匹配的问题。4、 实际用起来怎么样体积小gzip 之后不到 13kB不用装额外的构建插件。TypeScript 类型是内置的不用单独装typesprops 能直接推导到样式里。服务端渲染、React Server Components、流式 SSR、React Native一套 API 全覆盖。运行时自动检测环境不用手动配置。csshelper 可以把公共样式块提出来复用consttruncatecsswhite-space: nowrap; overflow: hidden; text-overflow: ellipsis;;constLabelstyled.span${truncate}max-width: 200px;;asprop 可以在不改样式的情况下换掉渲染的 HTML 元素。attrs可以给组件设置默认的 HTML 属性。5、 谁在用只要你的项目用 React就需要管样式。styled-components 适合这些场景组件库开发需要严格隔离样式作用域需要主题切换的产品比如暗色模式用 Next.js 做 SSR 的项目需要和 RSC 兼容React Native 项目想用同一套写法管 Web 和移动端的样式十年了API 稳定社区成熟遇到问题基本都能搜到答案。需要主题切换的产品比如暗色模式用 Next.js 做 SSR 的项目需要和 RSC 兼容React Native 项目想用同一套写法管 Web 和移动端的样式十年了API 稳定社区成熟遇到问题基本都能搜到答案。