希望能支持动态修改css变量

[xmsz-stu]

对这个效果真的馋哭了

第一个：
我现在都是用style去覆盖的，但是style写变量，能用但是ts会报错，每次得再加个@ts-ignore。

第二个：
不用style覆盖的时候，我用className去覆盖，但大部分情况下，只是改1一个，如果写className太麻烦了，而且后续维护也是噩梦

第三个：
第一个和第二个都有个致命缺点，那就是没有类型提示啊，我得先得用chrome选择元素，然后找到css变量，复制再修改

第四个：应用场景

还挺多的，比如一些带大圆角的box，里面有个搜索框，这个搜索框理论上应该也是大圆角

[DaiQiangReal]

我们有主题定制平台 https://semi.design/dsm ,所见即所得 @xmsz-stu

[xmsz-stu]

希望写的时候覆盖 不影响主题

[DaiQiangReal]

可以写个 body{} 的 选择器，在里面覆盖 css 变量，你指的是这个吗

[xmsz-stu]

就是一些特殊的场景，比如希望某个组件圆角从4px到8px。
如果是css覆盖实现，那么就是

// global.css
.button-radius-8px {
 --button-radius: 8px;
}
// index.ts
<Button className="button-radius-8px"></Button>

但是这样写会遇到很多问题

1. 比如后期根本不清楚这个样式能否删除
2. 如果是6px/10px... 就得无限写className
3. 写了className在button里还得赋值className
4. 赋值className还得去global.css先看有没有
5. 如果遇到多层级的样式覆盖，写起来更恶心
   麻烦且不好维护

但是如果可以直接在组件赋值变量那就非常方便了

<Button sx={{radius: 8}}></Button>

1. 写的时候就能知道结果
2. 不需要去写样式，也不用考虑样式覆盖
3. 删除也没有其他任何副作用