样式配置
样式配置用于调整单个组件的外观:尺寸、边距、颜色、边框、字体、阴影等。也可挂上全局样式中的类,兼顾统一与个性。

在哪里找
选中组件 → 属性栏 → 样式配置。
和表单样式、全局样式的分工
| 层级 | 优先做什么 |
|---|---|
| 表单配置 | 整表标签位置、尺寸默认 |
| 全局样式 | 多处复用的按钮色、标题强调 |
| 组件样式(本文) | 单个字段的圆角、背景、间距微调 |

常见可配项
| 类别 | 示例 |
|---|---|
| 尺寸 | 宽、高、最小/最大宽高 |
| 间距 | 外边距、内边距 |
| 颜色与背景 | 文字色、背景色 |
| 边框 | 线型、粗细、圆角 |
| 文字 | 字号、字体、对齐、行高 |
| 效果 | 阴影、透明度、缩放等 |
| 布局 | 显示方式、弹性排列(若组件支持) |
| 扩展 | 自定义 CSS(界面提供时)、全局 class |
字段占多宽也可在基础配置的「组件宽度」调整;复杂多列用布局组件。

怎么配置(分步)
- 先确认整表默认与是否已有可用全局样式。
- 选中组件 → 打开样式配置。
- 需要统一外观时,先挂全局 class;再改本组件独有项。
- 预览在 PC / 窄屏下看真实渲染。
业务示例
入门:突出「提交」按钮
加大字号、品牌主色背景、适当圆角。预览确认在手机宽度下仍易点。若多处提交按钮一致,做成全局 btn-primary 再引用。
入门:说明文字弱化
辅助说明用较小字号、次要文字色,避免和输入标题抢视线。
常用:只读字段弱化
详情页把只读输入框背景调为浅灰、减弱边框;公共弱化样式沉淀为全局类,录入页不挂该类。
常用:金额右对齐
金额、数量类字段文字右对齐,列表感更强;可与表单「内容对齐」默认配合。
常用:危险操作区提醒
删除确认旁的提示条:浅底 + 左边框强调色;按钮挂 btn-danger 全局样式。
使用建议
- 先定表单级与全局样式,再对个别字段微调。
- 避免每个字段颜色都不同,保持信息层级清晰。
- 改样式后用预览看真实渲染,设计态与预览可能略有差异。
- 能用布局/宽度解决的排版问题,少用绝对定位类技巧。


