2024 年了, 现在 REACT 的 CSS 的正确姿势是什么?

128 天前
 johnfrank

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

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

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

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

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

5539 次点击
所在节点    Node.js
62 条回复
sjhhjx0122
128 天前
当有什么适老化,主题化的时候 styled component 真的很香
sjhhjx0122
128 天前
@johnfrank 用 clsx 之类的包一下
retrocode
128 天前
@johnfrank #40 我在 vue 中一般是 v-if 或者干脆 {specification:'A'}[specification]解决, 或第三方组件会有 getRowClassName 之类的回调函数, 这部分操作属于框架层了具体看框架, 库本身只是解决 css 问题
nulIptr
128 天前
@wunonglin #30 我理解用 tailwind 提供了一大堆内置的 class 样式,然后只要在 html/模板/jsx 里面写 class 就可以了
但是我试了一下发现内置样式都是 w-24 h-24 text-lg 这种,然后设计稿又不是这个尺寸,然后就会写出大量的 h-[28px]这种硬编码的长度。感觉很难受。
不涉及到大小的时候,比如 flex 相关的那些 class 名字还是很好用的。
ixixi
128 天前
简单的 三四个属性内用 tailwind ; 非常复杂的 就写到 less 文件内

tailwind 找到感觉后还是非常好用的
SeeYouNextTime
128 天前
tw 好用的一批。公共样式 apply 一下就行了。出活快才是关键。
qingshui33
128 天前
@xu33 #32 好的,感谢指点
ruoxie
128 天前
不喜欢 css in js ,非常不喜欢,喜欢用 CSS module
wunonglin
128 天前
@nulIptr #44 用你所需的就行。额外的自己写 css 就好了,tailwind 也支持 @apply
zhlssg
128 天前
重构的时候就知道 tailwind 香了
aliyun2017
128 天前
```
const submitBtn = Spark.Fixed({
style: {
width: "50px",
height: "50px",
bottom: "20px",
right: "20px",
background: "url(./assets/icon-submit.svg) no-repeat",
backgroundSize: "100% 100%;",
},
shover: { transform: "scale(1.2)" },
on: {
click() {
Spark.router.push("/submitCode");
},
},
});
```
zbowen66
128 天前
Tailwind 不用起名啊,这还不香?
wobuhuicode
128 天前
有设计师就自己写 CSS
没有设计师就用 tailwind CSS
yuyu168
128 天前
@Hilalum 这种巨坑
Jaosn
128 天前
说 Tailwind 不好维护的绷不住了,我想说 less scss 这种才不好维护好吗,特别是 2C 项目,命名、写法、嵌套,后续迭代,真的爆炸
crocoBaby
127 天前
我觉得 tailwind 不用想类名对我太友好了
realJamespond
127 天前
sass + react-jss + antd 还行
lee88688
126 天前
@changwei 之前跟一个社区的项目提 PR 的时候发现 antd 的一个 theme 会在每次使用 useTheme 时候浅拷贝,这个还算正常操作,但是调试的时候看了一眼这个对象里面有接近 8000 个属性🤣。devtools 看了一下耗时,有大约 30%时间在复制这个对象,我当时就纳闷为什么要塞这么多东西进去。我觉得 tailwind 的问题在于 css 语义话被干掉了,在 class 太多之后调试的时候复杂度有点增大,我也是业余项目用也没有体验出什么特别大的缺点。
zthxxx
125 天前
@banricho #38 是啊,大部分说的都有不同程度混淆概念和维度,

- styled-components 是「定义组件的方式」、是语义化拆分组件的写法形式
- Sass / Less / tailwind (包括 classname 和 @apply) 都是「编译生成 CSS 的方式」,只是提供的语法不同
- import *.css (包括 module.css) 和 css`...` (及其各种语法糖) 是工程化打包后「注入 CSS 的不同方式」

这三个维度是可以互相组合、也可以单独用其一的,
比如你可以
- 在 styled-components 写法中,直接写 tailwind class 然后编译生成 CSS 被自动注入(或者 no-inject 手动注入)
- 在 styled-components 写法中,直接写 less 的同时在里面写 @apply tailwind class 然后编译后注入
- 直接写 [.module].(less|sass|css) 文件,import 后写到组件 classname 上,当然同样的,样式文件里可以写 less/sass/css/tailwind 语法(指各类 at-rules)

这里的编译器都是 postcss + 各种东西

至于直接写 style={{...}} 的,那是真的 js 写 inline-style 不在以上 CSS 范畴内
johnfrank
123 天前
最后研究了一圈,还是觉得用 module sass 比较符合自己的习惯。

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/1054680

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX