css - GWT 覆盖另一个 GSS 文件中的 GSS 样式

Question

由于我的应用程序变大了，我决定应用程序的每个“模块”都有自己的资源文件、样式文件和 GSS 文件。此外，例如按钮的样式将位于不同的全局 GSS 文件中，因为它更像是一种应用程序样式，在整个应用程序中使用。

这不是问题，但是当我想做这样的事情时:

.buttonGroup>.button.active{ background-color: red}

在其中一个模块中，它不匹配任何内容。

由于按钮样式(buttonGroup、button、active)和行为(在单击时添加“active”类)是在不同的(全局)GSS 文件中指定的，因此我无法更改“active”类的样式。

这是一个简化的例子:

public interface AppResources extends ClientBundle {

    public static AppResources INSTANCE = GWT.create(AppResources.class);

    @Source({"style.gss"})
    AppStyle appStyle();
}

样式文件:

public interface AppStyle extends CssResource {

    String buttonGroup();
    String button();
    String active();
}

模块:

public interface ModuleResources extends AppResources{

    public static ModuleResources INSTANCE = GWT.create(ModuleResources.class);

    @Source({"style.gss","module.gss"})
    ModuleStyle moduleStyle();
}

样式文件:

public interface ModuleStyle extends AppStyle {
}

在 GSS 文件中，我尝试使用 @provide 和 @require(没有它就无法编译，因为它会缺少标识符或类)。

然后它编译正常，但是按钮组、按钮甚至事件类都被视为属于 AppStyle，因此使用 style.gss 样式和规则:

.buttonGroup>.button.active{ background-color: red}

在 module.gss 中没有匹配任何东西，因为它可能正在寻找 .hash-ModuleStyle-buttonGroup、.hash-ModuleStyle-button 和 .hash -ModuleStyle-active 类，而按钮上的实际样式是 .hash-AppStyle-buttonGroup 等

Answer 1

最后，我通过在我想在不同 GSS 样式表中使用的类上使用 @external 解决了这个问题。

通过使用 @external 所有来自小部件的类，它们有自己的样式表，保持它们的类名不被混淆，这样它们就可以在任何模块样式表中被覆盖。

我以前不想这样做，但这是我能想到的唯一解决方案。