参考文档
https://styled-components.com/docs
尽量不要使用内联样式
styled-components（以下简称sc）的原理是在<head>元素中动态插入组件专属的<style>元素，而若要使用内联样式，需要将每个使用内联样式的元素替换为sc提供的组件，并将元素的所有属性通过attrs()方法传递。
更推荐的做法是在组件顶层替换sc提供的组件，一般是StyledDiv（组件的命名可以自定义），然后对于各级子元素利用类名来应用样式。但对于经常起伏的样式，可以考虑使用内联样式来避免频繁插入<style>。例如某个元素的颜色需要高频变化，此时可以考虑将该元素替换并通过attrs()来传递内联样式：attrs(props => ({style: { color: props.color }}))。
TypeScript
要在TS中定义主题的类型（也就是俗称的使用主题时能自动“点”出来←_←），需要使用声明合并，参考官方文档
其他UI库的样式
对于应用了其他UI库的组件（例如Material, AntD, Element），可以通过库对应的专属类名来覆盖样式，以此达到项目统一使用sc管理样式（包括主题）的目的
全局样式
若有需要应用全局样式的需求，例如对于使用Portals的组件，可以使用createGlobalStyle来创建全局样式
canvas组件
sc没有办法直接管理这类组件，但若需要统一管理主题，则可以按照官网推荐的方式，从中选取最适合各个canvas组件的主题获取方式拿到主题配置，再进行主题设置
注意：若是依赖组件属性的类组件，则不推荐使用withTheme高阶组件，因为这样会导致原组件外嵌套一层封装。建议使用theme prop
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
