(interpolation)规则, styled-components 正是基于这个特性构建:
image.png
它的原理非常简单,所有静态字符串会被拆分出来合并成为数组, 作为第一个参数传入到目标函数...image.png
interleave函数将将静态字符串数组和内插值’拉链式‘交叉合并为单个数组, 比如[1, 2] + [a, b]会合并为[1, a, 2, b]
关键在于如何将数组进行扁平化,...最后通过 StyleSheet 对象将样式规则插入到 DOM 中
image.png
stylis是一个 3kb 的轻量的 CSS 预处理器, styled-components 所有的 CSS 特性都依赖于它...target、并生成组件 id 和 ComponentStyle 对象
StyledComponent: 这是样式组件,在它 render 时会将 props 作为 context 传递给 ComponentStyle...,并生成类名
ComponentStyle: 负责生成最终的样式表和唯一的类名,并调用 StyleSheet 将生成的样表注入到文档中
StyleSheet: 负责管理已生成的样式表, 并注入到文档中