如何在Sanity Studio中设置字段宽度，实现混合布局？

要实现你要的布局效果，不用直接给字段加百分比宽度，而是用**字段分组（fieldsets）**来控制局部布局，具体做法如下：

核心思路 #

把需要横向排列的seoSize、fontSize、colour三个字段放到同一个分组里，给这个分组设置columns: 3，让组内字段自动平分宽度；而heading、subheading这两个文本字段不加入分组，默认就会占满100%宽度。

完整Schema示例 #

export default {
  name: 'heading',
  type: 'object', // 若是组件schema，此处一般为object类型
  title: '标题组件',
  fieldsets: [
    {
      name: 'styleSettings',
      title: '样式设置',
      options: {
        columns: 3, // 分组内分3列
        collapsible: false // 可按需设置是否允许折叠分组
      }
    }
  ],
  fields: [
    // 加入样式分组的三个选择框
    {
      name: 'seoSize',
      type: 'string',
      title: 'SEO尺寸',
      fieldset: 'styleSettings',
      options: {
        list: ['small', 'medium', 'large']
      }
    },
    {
      name: 'fontSize',
      type: 'string',
      title: '字体大小',
      fieldset: 'styleSettings',
      options: {
        list: ['xs', 'sm', 'md', 'lg']
      }
    },
    {
      name: 'colour',
      type: 'string',
      title: '颜色',
      fieldset: 'styleSettings',
      options: {
        list: ['primary', 'secondary', 'neutral']
      }
    },
    // 占满宽度的文本字段
    {
      name: 'heading',
      type: 'string',
      title: '主标题'
    },
    {
      name: 'subheading',
      type: 'text',
      title: '副标题'
    }
  ]
}

补充说明 #

• 你之前用width: "30%"不生效，是因为Sanity的字段宽度配置不支持百分比字符串，而是用数字比例：比如在1列布局里，width: 0.5就是占50%宽度；在3列布局里，每个字段默认width:1，刚好平分3列（约33%宽度，和你要的30%效果接近）。
• 如果需要微调单个字段的宽度，可以给字段加width属性，比如在3列分组里，给某个字段设width: 1.5，其他两个设width: 0.75，就能实现不等宽的横向布局。

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