组件库预设样式对象被意外改写本质是运行时JavaScript对象引用被直接修改，属数据污染而非CSS问题；应通过Object.freeze或Proxy拦截验证，导出时递归冻结或改用工厂函数返回新副本，并在构建期用ESLint、Babel插件和TypeScript readonly进行静态防护。
组件库开发中预设样式对象被意外改写，本质是 JavaScript 对象引用被外部代码直接修改，不是 CSS 层面的问题，而是运行时数据污染。这类问题一旦发生，会导致所有使用该组件的实例样式错乱，且难以定位——因为控制台看不到报错，只看到渲染异常。
确认是否真被改写
先别急着修，用最简方式验证：
- 在组件初始化后立即 Object.freeze(styles) 或 Object.preventExtensions(styles)，再运行看是否报错（仅开发环境）
- 在关键样式对象上加 Proxy 拦截 set 操作，打印调用栈：
const safeStyles = new Proxy(original, { set(target, key, val) { console.trace(`样式对象 ${key} 被改写`); return Reflect.set(target, key, val); } }) - 检查是否有人在业务代码里写了类似
MyButton.styles.color = 'red'或通过Object.assign(MyButton.styles, {...})直接覆盖
从源头切断可变引用
预设样式对象必须默认不可变，不能靠文档提醒，要靠机制保障：
- 导出时用 Object.freeze 包裹顶层对象，包括嵌套对象（递归 freeze 或用
deepFreeze工具函数） - 避免直接导出裸对象，改用函数返回：
export const getButtonStyles = () => ({ color: '#333', fontSize: '14px' })，每次调用都生成新副本 - 若需支持主题扩展，用工厂函数 + 不可变合并：
export const createTheme = (base) => Object.freeze({ ...base, primaryColor: '#007bff' })
构建时做静态防护
光靠运行时不够，要在打包阶段提前拦截危险操作：
- 在 ESLint 中启用 @typescript-eslint/no-immutable-properties（TS 项目）或自定义规则，禁止对已知样式对象属性赋值
- 用 Babel 插件（如
babel-plugin-transform-protect-object）在编译期将MyLib.styles.xxx =类语句转为报错提示 - TypeScript 用户可在类型层面锁定：用
readonly修饰接口属性，配合as const声明常量对象
提供安全的定制入口
开发者想改样式是合理需求，但不该允许他们动原始对象：
- 暴露 theme 参数 或 props.style，让业务层通过合法通道注入变更，组件内部做 merge 而非 mutate
- 提供 useTheme Hook（Vue/React），返回只读主题对象，并在内部自动处理响应式更新
- 文档中明确标注哪些对象是“只读契约”，哪些 API 是唯一受支持的定制方式，把错误引导变成正确路径
