Sanity.io Studio自定义样式：覆盖CSS变量时fieldset背景色不生效

为什么两个同层级的CSS变量一个生效一个不生效 #

• --fieldset-border 是Sanity基础主题体系内，直接映射到fieldset组件边框属性的有效开放变量，会在组件样式编译阶段被读取并注入到对应选择器规则中，修改值会直接触发样式更新，所以表现完全符合预期。
• --fieldset-bg 根本不在当前版本Sanity的有效主题变量映射表里：翻遍核心主题源码就能发现，所有和fieldset相关的样式规则压根没引用过这个自定义属性——相当于你在:root上定义了个没人读的孤立变量，不管是关联其他全局变量值还是硬编码固定色值，都不会产生任何样式变化。
• 这类无效变量大多来自旧版文档的残留示例：Sanity在v3版本迭代时对主题变量体系做过大规模调整，不少旧版的--*-bg类全局变量被收归为组件内部作用域的私有变量，不再全局暴露到根节点层级，直接在:root覆写自然无法生效。

实现fieldset自定义背景色的正确操作 #

• 绕开不存在的全局变量，直接定位fieldset组件的真实DOM选择器写样式规则。Sanity所有基础UI组件都带统一的data-ui属性标识，fieldset组件对应的选择器是[data-ui="Fieldset"]，直接给这个选择器设置背景属性即可覆盖默认样式，参考代码：

  @import "part:@sanity/base/theme/variables/gray-colors-style";
  
  :root {
    --fieldset-border: none;
  }
  
  /* 直接给fieldset组件元素设置背景值 */
  [data-ui="Fieldset"] {
    background-color: var(--gray-darker);
    /* 如需硬编码固定色值可替换为 #454545 */
  }
  

• 走官方组件内部变量的覆写路径：Sanity的fieldset本质是基于基础Card组件封装的，它的背景色实际由Card组件内部的--card-bg变量控制，不需要直接写样式属性，只要在组件作用域下覆写这个变量就能实现效果，参考代码：

  [data-ui="Fieldset"] {
    /* 覆写组件内部关联的背景变量 */
    --card-bg: var(--gray-darker);
  }
  

• 常见踩坑提醒：自定义样式必须通过Sanity官方规定的样式导入路径接入构建链路，如果写在项目普通的全局CSS文件中，会被Sanity的样式隔离机制拦截，不会应用到Studio界面上。

内容的提问来源于stack exchange，提问作者Moshe