2024 年了， 现在 REACT 的 CSS 的正确姿势是什么？

[johnfrank]

楼主不是搞前端开发的，偶尔写过一些前端程序。最近要做个自用的小项目。

3-4 年前写的 vue2 ，还是 class component ，在.vue里面写 sass ，然后手动判断给 div 加不同 class name 。

最近看一些 react 都在用什么css-in-js，感觉很乱，没太看懂，怎么像 sass 一样 import 公用样式和使用其他 css Framework 的变量。

所有请教下大家现在 react 下 css 都用什么？

PS 。个人不是很喜欢Tailwind CSS这种。

[gary907478]

react 我个人用 tailwind 。但是实际上无所谓，自己的项目，你怎么舒服怎么来。

[BeijingBaby]

现在主流 tailwind 吧，不喜欢也可以变喜欢。

[enchilada2020]

同不喜欢 tailwind 和 css in js…

[tcper]

用来用去，tailwind 是终点

[zedhugh]

同不喜欢 css in js ，非常不喜欢，我比较喜欢用 CSS module

[lee88688]

css in js 设计不好有很大的性能问题，隔壁的 antd5 就是这么的😂。我自己 tailwind 、css module 、传统的手搓 css 都可以，没啥偏好。tailwind 好就好在快，但是维护确实是个大问题。

[murmur]

就普通鞋 css 就可以，tailwind 太没有工业化的感觉了，写回 bootstrap 那个年代了

[zthxxx]

我个人主力是 CSS Variables + styled-components (emotion)

其中 styled-components 是指这一类 css-in-js 的写法范式，并不单指一个库，
用于语义化组件、做开发 / review 代码的时候 更关心组件结构不关心样式

而内部具体样式的实现可以是写 CSS / Less / Sass / 甚至 Tailwindcss (对，tailwind 只是生成 css 的一种方式)

[zthxxx]

#8 第二张图图挂了重发了下试试

[estk]

Tailwind 一开始不熟练，用几次后就不再喜欢 css 了

[douxc]

unocss + UI 框架;大部分样式 UI 框架都处理好了，用 unocss 稍微调整 margin 、padding 也就没啥了

[jackge0323]

自己有 css 架构能力，用 module+sass 自己写也行，没有的话还是用比较成熟的方案。

[wetyq]

公司项目：老板要求用啥就用啥
个人项目：那个用着舒服用那个

[Cbdy]

emotion

[lsk569937453]

已经变成 tainwind 的模样了

[kongkx]

sass 跟 tailwind 一起用， 主题变量在 tailwind 上设置， 通过 tailwind 插件生成对应的 variable.scss 给 sass 使用。

[yhxx]

不喜欢 tailwind+1
明明只是一部分人的狂欢，不知道为什么要宣传成“主流是 tailwind”
如果也不喜欢 emotion 之类的方案，可以考虑还是用 less 、sass 这种，很容易理解，维护也很方便

[qingshui33]

之前我也把各种 CSS 的编写位置都尝试了一遍，感觉没有哪一种让我感到很丝滑，就只论 css 编写位置这快，我个人站 Vue ，所以问题来了，有没有大哥研究过怎么在 React 的组件中写一个 style 标签用来编写样式的方法？

[xu33]

@qingshui33 你可以用 styled-components 的 globalStyle ，在你的组件局部引用来达成这个效果

[bojackhorseman]

抱歉我用 unocss