解决的方向: 由工具来转换或创建类名
5️⃣ 常量共享
常规的 CSS 很难做到在样式和 JS 之间共享变量, 例如自定义主题色, 通常通过内联样式来部分实现这种需求
解决的方向: CSS-in-js...内联 CSS 不支持复杂的样式配置, 例如伪元素, 伪类, 动画定义, 媒体查询和媒体回退(对象不允许同名属性, 例如display: -webkit-flex; display: flex;)
内联样式通过...当然通过某些工具可以将静态的 object 提取出去
不方便调试和阅读
…
所以 内联 CSS 适合用于设置动态且比较简单的样式属性
社区上有许多 CSS-in-js 方案是基于内联 CSS 的, 例如...;
font-weight: bold;
}
// 覆盖内联css样式
&[style] {
font-size: 12px !..., 例如:global, :local, :export, compose:
CSS module 同样也有外部样式覆盖问题, 所以需要通过其他手段对关键节点添加其他属性(如 data-name).