样式配置
样式配置调整当前选中组件的外观：引用全局样式的 Class，边距/颜色等局部项，以及需要「穿透」到内部结构时用的 级联样式。先保证字段和布局正确，再微调样式。
在哪里找
选中组件 → 右侧 组件配置 → 样式配置（内含 Class、级联样式、外边距/内边距、尺寸、布局、文字、颜色、背景等）。
和表单样式、全局样式的分工
| 层级 | 管什么 |
|---|---|
| 表单级样式（表单配置） | 整表默认标签位置、尺寸等 |
| 全局样式 | 可复用的 Class 资产（如「主色按钮」「危险按钮」） |
| 组件样式（本文） | 当前组件的局部外观 + 选用 Class |
| 级联样式（本文） | 写规则，精确改组件内部或表单项外框（见下文） |
多处同款外观：先做全局样式，再在 Class 里引用。只改一处：用局部颜色/边距即可。面板项改不到的内部细节，再用级联样式。
怎么用（分步）
下面以「地址信息采集」里的「提交申请」按钮为例。
- 选中要改外观的组件。
- 右侧滚到 样式配置，找到 Class（选择器类名
._fd-gcs，界面文案为 Class）。
- 打开 Class 下拉，选用已有的全局样式（可多选、可搜索；需先在全局样式中创建）。
- 看画布：按钮应套上对应外观（如「主色按钮」）。
- 需要单处微调时，在样式配置里改 外边距 / 内边距，并查看 颜色、背景、样式预览（更多项可点 展开更多）。
TIP
能复用的颜色、圆角优先做成全局 Class；局部样式适合只改这一个组件的间距或对比度。
常见可配项
| 类别 | 说明 |
|---|---|
| Class | 引用全局样式，可多选 |
| 级联样式 | 打开弹窗编写规则，穿透改内部/表单项样式 |
| 外边距 / 内边距 | 与周围组件的空隙、内部留白 |
| 尺寸 / 布局 | 宽高相关、对齐方式（以面板为准） |
| 文字 | 字号等文字项 |
| 颜色 / 背景 | 文字色、背景色 |
| 样式预览 | 对照当前样式效果 |
级联样式
当 Class 和面板上的颜色/边距不够用——例如要单独改输入框内边框、标签文字颜色——可点样式配置旁的 级联样式，在弹窗里写规则。
设计器提供两个占位关键字（保存后会自动换成该组件自己的类名）：
| 关键字 | 作用 |
|---|---|
::root | 作用在组件自身（及内部子元素，如输入框外壳） |
::wrap | 作用在表单项容器（含字段标签等） |
TIP
级联样式需要组件支持 Class 才能生效。日常配色、按钮主色/危险色优先用全局 Class；只有面板改不到时再写级联样式。规则写法详见级联样式技术说明。
怎么用（级联样式）
下面以「地址信息采集」的「联系人」输入框为例：让标签更醒目，并给输入框加一圈强调色边框。
- 选中字段，在 样式配置 找到 级联样式（与 Class 同一区域）。
- 点 级联样式，打开弹窗。空白时可参考占位提示：
::root改组件、::wrap改表单项。
- 按业务写入规则后点 确定。示例（强调联系人标签与输入框边框）：
::wrap .el-form-item__label {
color: #e6a23c;
font-weight: 600;
}
::root .el-input__wrapper {
box-shadow: 0 0 0 1px #e6a23c inset;
}
- 关闭弹窗后，入口可出现已配置角标；画布上应能看到变化。
- 点 预览 再确认最终观感。
场景示例
入门：突出「提交申请」
背景：提交要一眼能看到，其它操作不要抢视线。
按上文为「提交申请」选用「主色按钮」后，点 预览 核对。
预期：提交为主色；作废等危险操作应另挂「危险按钮」（见下节）。
入门：危险操作标红
背景：「作废申请」要明显区别于提交。
步骤：
- 选中「作废申请」。
- 在 样式配置 → Class 选用「危险按钮」（需已在全局样式中创建）。
- 看画布上提交与作废并排效果。
预期：危险操作为红色系，降低误触。
常用：只读字段弱化
背景：回显/只读字段不要太抢眼。
步骤：
- 选中字段，先在属性里打开 是否只读（见禁用及只读）。
- 再打开 样式配置，适当调低 颜色 对比或弱化背景。
预期：只读区更「安静」，可填区更清晰。
常用：重要字段用级联样式强调
背景：地址采集里「联系人」特别重要，希望标签加粗变色，输入框边框也更明显；面板颜色项改不到输入框内部外壳。
按上文 级联样式 为「联系人」配好 ::wrap（标签）与 ::root（输入框）后，点 预览 核对。
预期：仅该字段外观变化，其它字段不受影响。不需要时清空级联样式弹窗内规则并确定即可去掉。
注意点
- Class 可多选，后加样式可能覆盖同名属性。
- 改 Class 前确认对应全局样式已保存。
- 样式不替代布局：多列结构仍用栅格等布局组件。
- 预览时核对浅色背景下的对比度。
- 级联样式写错可能导致样式异常；改完务必预览。组件不支持 Class 时规则不会生效。
- 能用 Class / 面板项解决的，优先不用级联样式，便于维护。