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样式粘贴即可