styled-components
2024-08-30 10:18:27
参考:
http://www.alloyteam.com/2017/05/guide-styled-components/
https://medium.com/styled-components/getting-sassy-with-sass-styled-theme-9a375cfb78e8
https://juejin.im/entry/59473d2fda2f6000678468cb
使用方式主要是 模板字符串 和 标签模板(函数的独特调用形式)。
使用标签模板,会返回一个React组件,可以在定义的时候通过props获取到外部传递进来的数据;
组件生成的元素上会被自动加上一个随机的类名,以达到不冲突的目的。
使用这种组件有利于逻辑与样式的分离(分离成逻辑组件和展示组件,展示组件内部使用style-components)
css module是js和css分离的写法
styled-components是在js中写css,这种css in js模式是新一代react组件样式解决方案,可以在js中写条件判断,使用的时候更加简洁和语义化,对比以下两种方式:
<TinyBitLongerStyleName></TinyBitLongerStyleName>
<div className={styles.longerStyleName}></div>
最新文章
- localStorage使用总结
- Scrum项目8.0
- CentOS 7系统挂载NTFS分区的移动硬盘(转载及体验 CentOS6.5系统挂载NTFS分区的移动硬盘)
- 关于line box,inline box,line-height,vertical-align之间的关系
- JavaScript call和apply的用法
- LDR指令的格式:
- 软件工程——UML简介
- UVa 10617 Again Palindromes / 记忆化搜索
- RESTful Console Application
- 用js实现动态规划解决背包问题
- 第六十六天 js操作高级
- windows openssl-1.1.1 编译静态库和动态库
- 记一次laravel远程关联查询
- Dubbo 源码分析 - 集群容错之 Directory
- 【app】自动化必备之adb使用
- There is no setter for property named 可能产生的原因!
- 使用xshell+xmanager+pycharm搭建pytorch远程调试开发环境
- Java模版方法的另一种实现
- ubuntu计划任务的编写
- Linux 下的三种时间介绍