styled-components

styled-components 是什么?

styled-components 是一个常用的 css in js 类库。和所有同类型的类库一样,通过 js 赋能解决了原生 css 所不具备的能力,比如变量、循环、函数等。

相对于其他预处理有什么优点?

诸如 sass&less 等预处理可以解决部分 css 的局限性,但还是要学习新的语法,而且需要对其编译,其复杂的 webpack 配置也总是让开发者抵触。

如果有过sass&less的经验,也能很快的切换到styled-components,因为大部分语法都类似,比如嵌套,& 继承等, styled-componens 很好的解决了学习成本与开发环境问题,很适合 React 技术栈 && React Native 的项目开发。

解决了什么问题?

className 的写法会让原本写css的写法十分难以接受

如果通过导入css的方式 会导致变量泄露成为全局 需要配置webpack让其模块化

以及上面提到的解决了原生 css 所不具备的能力,能够加速项目的快速开发

源地址文章:https://www.styled-components.com/docs


注意:styled-components解决全局样式'injectGlobal' 废除的问题

具体解决方式:

1. 用createGlobalStyle定义全局样式


2.作为组建的形式展示出样式

3.想引用全局的默认样式可以查找百度的reset.css段css样式粘贴即可


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容