Ketcher源码学习-储备知识-dependencies(3)-Material UI与Emotion
一、CSS-in-JS
1. 早期编码原则：关注点分离 (将HTML、CSS、JS分写为不同的文件，而非混入同一代码块)。
2. 后期三大框架：模块化思想，组件封装，违背了关注点分离原则。以React为例：
(1) 通过JS操控HTML (JSX语言)。
(2) 通过JS操控CSS (DOM的style属性)。功能薄弱。
3. 由此诞生了大量的第三方库，用以加强React中JS操控CSS的能力。其共通的思想称为CSS-in-JS。
二、Emotion
1. 一个CSS-in-JS方案库。实现功能的方式有两种：
(1) 通过styled方法创建包含样式的React组件。
(2) 直接向React组件中传入css属性。
2. styled API
(1) 使用格式：styled.el(styles)。
(2) el：HTML标签或React组件。
(3) styles：【模板字符串】、【样式对象】或【返回样式对象的函数】。
3. css Prop & css API
(1) css Prop：评估、计算、转换传入的数据，再赋值给className。只接收【样式对象】，如需传入【模板字符串】，需要css API进行转换。
(2) css API：可传入【模板字符串】或【样式对象】，返回一个SerializedStyles类型的数据，该类型数据可用于css Prop、css API call及styled API call。
4. Global Style & Theming
(1) 定义全局样式和主题样式。
(2) Global组件无需包裹任何内容，类似于直接在项目中引入样式文件。
评论
发表评论