如何为库组件保存主题样式？解决项目A引用B组件样式丢失问题

针对你遇到的Qooxdoo框架下，项目A依赖项目B时，B中带主题样式的B.Button在A里无样式的问题，以下是几种无需拆分主题、保持项目B独立性的解决方法：

方法1：在项目A的主题中合并项目B的外观定义 #

修改项目A的Appearance主题，将项目B的mybutton外观合并进来，确保样式被全局加载：

qx.Theme.define("A.theme.Appearance",
{
  extend : qx.theme.indigo.Appearance, // 保持A原有的基础主题

  appearances : qx.lang.Object.merge(
    // 先合并B的外观定义
    B.theme.Appearance.prototype.appearances,
    {
      // 这里可以添加A自身的外观定义
    }
  )
});

注意：要保证项目B的代码在A的主题加载前已被引入，否则B.theme.Appearance会未定义。

方法2：让项目B的组件自动注册样式 #

在B.Button的类定义中添加自动注册逻辑，当组件被加载时，自动将样式合并到当前应用的主题中，无需修改项目A的代码：

qx.Class.define("B.Button", {
  extend : qx.ui.form.Button,

  construct : function(label) {
    this.base(arguments, label);
    this.setAppearance("mybutton"); // 绑定自定义外观
  },

  statics : {
    registerThemeStyle : function() {
      const currentTheme = qx.theme.manager.Appearance.getInstance().getTheme();
      // 避免重复注册
      if (!currentTheme.appearances["mybutton"]) {
        qx.lang.Object.merge(currentTheme.appearances, {
          "mybutton": B.theme.Appearance.prototype.appearances["mybutton"]
        });
        // 刷新外观管理器，应用新样式
        qx.theme.manager.Appearance.getInstance().refresh();
      }
    }
  },

  // 类加载时自动执行注册逻辑
  defer : function(statics) {
    statics.registerThemeStyle();
  }
});

这种方式完全保持了项目B的独立性，只要A正确引入B的组件，样式就会自动生效。

方法3：动态替换项目A的主题继承 #

如果项目A的主题允许，直接让A的主题继承项目B的主题，这样B的所有样式都会被继承：

qx.Theme.define("A.theme.Appearance",
{
  extend : B.theme.Appearance, // 替换为继承B的主题

  appearances : {
    // A自身的外观定义会覆盖B中的同名样式
  }
});

这种方式适合A不需要保留原有基础主题全部样式的场景。

内容的提问来源于stack exchange，提问作者goldim