React的styled-components

html-css016

React的styled-components,第1张

styled-components 是react的一个第三方库，一种css私有化的方式。用来实现 CSS in JS 的方式之一。

在多人协作中，css必定会出现命名冲突，与vue的scoped解决方案不同，react用styled-components的给类名加了随机字符的方式实现了css的私有化。

缺点：麻烦，增加学习成本

这样写的目的，是当浏览器既支持私有属性又支持标准属性时，会最终采用标准属性（后面的属性会覆盖前面的同名属性）。因为私有属性都是带有试验性质的，效果有可能跟最终的结果不太相同，而一旦支持标准属性，则表明这个属性的用法已经成熟了，已完全符合标准了。所以当浏览器既支持私有属性又支持标准属性时都是建议采用标准属性的。