unocss 的顺序问题,求大佬解惑

65 天前
 chemms

大佬们,unocss 这种没有语义顺序吗,我先写的 red 然后前后插入新样式,但是实际是 red 生效

<div className="size-50px bg-green bg-red bg-blue"></div>

就是想组件的传入 className 灵活些,可以直接注入

className={
  clsx(
    'px-12px flex-center border-0 select-none focus:outline-none relative',
    'bg-gradient-to-r from-[#006DE9] to-[#0077FF] ',
    'disabled:bg-blue-300 disabled:cursor-not-allowed',
    'flex-center',
    rounded ? 'rounded-100000px' : '',
    isPressed ? 'bg-blue-800' : '',
    fullWidth ? 'w-full' : 'w-auto',
    loading ? 'opacity-50' : 'opacity-1000',
    sizeCss[size],
    className,
  )
}

有这些相关的配置吗,找了一圈了

890 次点击
所在节点    CSS
13 条回复
rain0002009
65 天前
别找了 应该是没有的 这个权重倒是和你定义 css 样式的顺序有关和 class 的顺序没关系 我依稀记得 写在下面的好像比上面的高那么一丢丢 我倒是好奇你为啥要这样用
chemms
65 天前
好吧,我这边想的是外面注入样式可以直接覆盖内部的,感觉自定义程度高点会特别灵活
chemms
65 天前
额外写 props 一个一个注入,感觉很麻烦哎
Track13
65 天前
顺序是看选择器权重,css 文件顺序以及文件内书写顺序。
如果是 tailwindcss 可以使用 tailwind-merge 。unocss 我就不清楚了。
chemms
65 天前
@Track13 选择器权重感觉怪怪的,这个 merge 我去研究下
chemms
65 天前
不行哎,这玩意 unocss 用不了,还是运行时的,官方没想法搞,估计只能使用选择器注入了吧,但是又不支持动态字符串,有点烦


https://github.com/unocss/unocss/issues/2748
miku999
65 天前
可以定义 variants 来添加额外的 layer, 比如 util:前缀对应的是 layer: 'utilities', 这样 bg-red util:bg-blue 就会使 blue 生效了
至于为什么原本代码里 bg-red 生效了, 可能是因为在别的文件里已经使用过了 bg-red 和 bg-blue, 先使用的是 bg-blue 后使用 bg-red, 这样生成的 css 文件里 bg-blue 靠前, 你这个文件里只是重复使用已经生成的类
chemms
65 天前
@miku999 我去研究一下这个
Track13
65 天前
@chemms 你这里都是 class 选择器,那肯定是看生成 css 文件内的顺序啊。这是不可控的。
chemms
65 天前
@miku999 这个通过 layer 确实可以实现后面覆盖前面,我加个 presetAttributify attributes 属性规则去解析,然后 variants 中去解析到这个属性规则的,但是发现这种写法不支持变量。。。
chemms
65 天前
@Track13 是啊,好像不可解
miku999
65 天前
@chemms #10 你会用到这么多 layer 吗, 我比较大型的项目也就三个就够了, components 最低级, 可被默认 layer 覆盖, 再有一个 utilities 覆盖默认 layer
感觉用到更多 layer 可能是写法不合适了, 用三元符或者别的一次只触发一个
chemms
64 天前
@miku999 是的大佬,这样就很合理了

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

https://yangjunhui.monster/t/1122874

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

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

© 2021 V2EX