超级会员免费看
本文详细介绍了在React中引入CSS的四种常见方式：在组件内直接使用style属性，组件中引入.css文件，使用.module.css文件以及CSS in JS（以styled-components为例）。对比了它们各自的优点和缺点，如内联样式避免冲突但可能导致代码混乱，.module.css文件实现局部作用域但限制了类名编写，以及CSS in JS灵活但可能增加学习成本。最后，强调了选择引入CSS方式应根据具体项目需求来决定。
一、是什么
组件式开发选择合适的css解决方案尤为重要
通常会遵循以下规则：
- 可以编写局部css，不会随意污染其他组件内的原生；
- 可以编写动态的css，可以获取当前组件的一些状态，根据状态的变化生成不同的css样式；
- 支持所有的css特性：伪类、动画、媒体查询等；
- 编写起来简洁方便、最好符合一贯的css风格特点
在这一方面，vue使用css起来更为简洁：
- 通过 style 标签编写样式
- scoped 属性决定编写的样式是否局部有效
- lang 属性设置预处理器
- 内联样式风格的方式来根据最新状态设置和改变css
而在react中，引入CSS就不如Vue方便简洁，其引入css的方式有很多种，各有利弊
订阅专栏 解锁全文
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
