React 下选择什么 CSS 组件?

2020-12-01

上午处理的第一个问题:在 React + NextJS 下如何选择一个更好用的 CSS 框架/组件库。除了 Antd,我还从大佬那得知了 Polaris 这个 React 组件库,但是他们都有个共同特点,就是 UI 很难定制。

说到可定制 UI 的组件框架,我第一时间想到的是 Tailwind,但是看着官方文档 提取组件 章节,总觉得这样写起来和我直接写 HTML 和 CSS 有啥区别呢?为何不直接使用 CSS 变量或者预编译器解决?最终封装成自己的 UI 组件来使用?

最终,我还是选择了使用基于我的「奇趣框架」自己写,需要快速搞出复杂交互的组件,再用 Antd 解决吧。

下午我使用 NextJS 写第一个需要背景图片的页面,就立马发现了问题,官方文档 的图片插入是基于 HTML 的 img 标签实现的,太智障了,无法直观的设置 CSS 的 background 属性,不然就层次结构混乱。我的第一直觉是使用 require() 引入图片,但是并没有成功,提示读取文件失败。

一番搜索后得知,最简单的办法就是安装 next-images 库,貌似是增加了 Webpack 的相关配置,才支持读取图片的。Stack Overflow 上有类似的问题,传送门、库的 介绍

晚上回到家,我并没有怎么淦代码,而是选择继续看《青春波纹》。毕竟,这真的是一部既热血、又可爱的一部番。这里面的女孩子真的都好可爱啊...

一边是自己的「晴风」号,另一边是自己老朋友所指挥的「武藏」号。连海上救援队都没有拿下的失控船舰,晴风号还有多少把握?岬明乃很无奈,也很伤心。她担心为了救「武藏」号伤了自己船上的人,也担心「武藏」号继续失控下去,伤了更多的人...

岬明乃:决断,你要我怎么决断。我们一直平安无事,都只是凑巧罢了,根本不是我的功劳。你们都是我亲爱的家人,一想到可能会失去你们...

黑木洋美:她的意思应该是互补不足才算真正的伙伴。宗谷同学,能辅佐舰长的,只能是你了

12.01-决断.jpg 12.01-宗谷的鼓励.jpg
配乐 焦虑
概览页 时间轴
奇趣音乐盒 技术源于 Kico Player
Emmm,这里是歌词君