由于 CSS 的封装非常弱,导致了一系列的第三方库,用来加强 React 的 CSS 操作。它们统称为 CSS in JS,意思就是使用 JS 语言写 CSS。根据不完全统计,各种 CSS in JS 的库至少有47种。老实说,现在也看不出来,哪一个库会变成主流。
你可能会问,它们与"CSS 预处理器"(比如 Less 和 Sass,包括 PostCSS)有什么区别?回答是 CSS in JS 使用 JavaScript 的语法,是 JavaScript 脚本的一部分,不用从头学习一套专用的 API,也不会多一道编译步骤。我看到一个新的 CSS in JS 库,叫做 polished.js。它将一些常用的 CSS 属性封装成函数,用起来非常方便,充分体现使用 JavaScript 语言写 CSS 的优势。
polished.js
提供的其他方法如下,详细用法请参考文档:https://polished.js.org/docs/。
normalize()
:样式表初始化placeholder()
:对 placeholder 伪元素设置样式selection()
:对 selection 伪元素设置样式darken()
:调节颜色深浅lighten()
:调节颜色深浅desaturate()
:降低颜色的饱和度saturate()
:增加颜色的饱和度opacify()
:调节透明度complement()
:返回互补色grayscale()
:将一个颜色转为灰度rgb()
:指定红、绿、蓝三个值,返回一个颜色rgba()
:指定红、绿、蓝和透明度四个值,返回一个颜色hsl()
:指定色调、饱和度和亮度三个值,返回一个颜色hsla()
:指定色调、饱和度、亮度和透明度三个值,返回一个颜色mix()
:混合两种颜色em()
:将像素转为 emrem()
:将像素转为 rem
参考文章:https://www.ruanyifeng.com/blog/2017/04/css_in_js.html