开发:useStyle 配置化方案

# 开发:useStyle 配置化方案

# 背景

活动页、低代码或运营组件中,经常会把样式能力下放给配置。直接把样式对象散落到组件里,容易出现重复逻辑、优先级失控和主题难统一的问题。

# useStyle 的目标

  • 统一样式配置的输入格式。
  • 把默认样式、主题样式和运行时覆盖逻辑集中到一个入口。
  • 让组件只关心“消费结果”,不关心“如何合并”。

# 一个合理的设计

  • 输入:基础样式、业务配置、状态样式。
  • 处理:做字段过滤、单位补全、优先级合并。
  • 输出:可直接给组件或 DOM 使用的最终样式对象。

# 适合放进去的能力

  • 主题色和设计 token 映射
  • 响应式尺寸处理
  • hover / disabled / active 等状态样式合并
  • 非法样式字段兜底过滤

# 注意点

  • 不要在 hook 里塞太多业务分支,否则配置化会变成另一套业务代码。
  • 样式配置要有限制,不能让任意字段穿透到底层。
  • 最终返回值要保持稳定,避免不必要的重复渲染。
Last Updated: 9/25/2026, 2:08:32 PM