开发:useStyle 配置化方案
wabicai
# 开发:useStyle 配置化方案
# 背景
活动页、低代码或运营组件中,经常会把样式能力下放给配置。直接把样式对象散落到组件里,容易出现重复逻辑、优先级失控和主题难统一的问题。
# useStyle 的目标
- 统一样式配置的输入格式。
- 把默认样式、主题样式和运行时覆盖逻辑集中到一个入口。
- 让组件只关心“消费结果”,不关心“如何合并”。
# 一个合理的设计
- 输入:基础样式、业务配置、状态样式。
- 处理:做字段过滤、单位补全、优先级合并。
- 输出:可直接给组件或 DOM 使用的最终样式对象。
# 适合放进去的能力
- 主题色和设计 token 映射
- 响应式尺寸处理
- hover / disabled / active 等状态样式合并
- 非法样式字段兜底过滤
# 注意点
- 不要在 hook 里塞太多业务分支,否则配置化会变成另一套业务代码。
- 样式配置要有限制,不能让任意字段穿透到底层。
- 最终返回值要保持稳定,避免不必要的重复渲染。