styled-components浅入浅出
2020-7-25
| 2023-5-6
字数 780阅读时长 2 分钟
beizhu
type
Post
status
Published
date
Jul 25, 2020
slug
summary
styled-components以组件的形式来声明样式,让样式也成为组件,从而分离逻辑组件与展示组件。
tags
CSS
category
技术
icon
password

styled-components

styled-components以组件的形式来声明样式,让样式也成为组件,从而分离逻辑组件与展示组件。

部分实践

1. 引入全部样式

2. input attr

为Styled-Component添加默认属性和默认样式值

3. 主题

4. 继承

StyledComponent2其实是一个全新的class
如果我们想要做到真正的继承,需要使用style-components提供的extend方法,它是StyleComponent下的一个属性方法。

5. withComponent

创建新StyledComponent的方法,该新StyledComponent会应用不同的标签或组件,但所调用的规则相同。

6. Refs

7. 获取Theme

插件

Stylelint

Styled Theming

vscode-styled-components

typescript-plugin-styled-components

总结

优点:

  1. 活跃的社区
  1. CSS的模板文字语法。这意味着,如果您可以编写普通的CSS,就可以为组件设置样式,而不必学习新的语法。
  1. Sass支持。
  1. 自动提供前缀
  1. 组件更加独立清晰,语义化更清晰,维护简单,第二个人接手很快,也不用顾忌之前的样式冲突。
  1. 减轻了大家类名命名的负担。
  1. 可实现仅加载所需的最少代码。
  1. 兼容性良好 v4.x(React v16.3 +:IE11,IE 9+(带有Map + Set polyfills)

缺点:

  1. 使用vscode-styled-components 有提示,但提示速度较慢,没有scss、css提示友好,比如margin-left,我在scss中只需要ml回车就行了,在styled-components组件中就还是得打全。
  1. 产品改样式,想要从HTML中定位确切的知道代码中某个 class 在哪儿用到很难

so:

优点>缺点,go on 用起来吧!
  • CSS
  • 函数柯里化简单了解React + antd-table 表格拖拽
    Loading...