GWT 在另一个 GSS 文件中覆盖 GSS 样式答案

【问题标题】：GWT override GSS style in another GSS fileGWT 在另一个 GSS 文件中覆盖 GSS 样式
【发布时间】：2017-09-12 17:34:49
【问题描述】：

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

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

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

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

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

这是一个简化的例子：

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（没有它就无法编译，因为它会丢失标识符或类）。

然后编译正常，但是buttonGroup，button甚至活动类都被视为属于AppStyle，因此使用style.gss样式和规则：

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

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

【问题讨论】：

您能展示一下您是如何使用它的吗？你是调用 moduleStyle().buttonGroup() 还是 appStyle().buttonGroup()？
显然是通过 AppStyle (AppStyle.INSTANCE.appStyle.button()) 因为按钮是通过应用程序在不同地方使用的组件。我只想在这个模块中，按钮的颜色略有不同，但除此之外它们应该保持不变。我会为按钮添加不同的类，但按钮实现在模块范围之外，所以它总是有来自 AppStyle 的 .active 类
同样明显，如果您调用 appstyle.button，您将获得 appstyle 按钮类而不是模块按钮样式；)。我会写一两个关于如何继续回答的建议。
我在想也许可以将 .active 类设为外部，但我认为必须有一种方法可以正常完成 :)

标签： css gwt gss

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

这实际上正是@Import 想要解决的问题！

【讨论】：