css - GWT - 设置全局 CSS 样式的最佳方式

Question

我们将 GXT 与 GWT 一起使用，这涉及到每个基本小部件有一个 CSS 文件。GWT 中拥有全局 CSS 样式的最佳方式是什么。

例如

global.css

.backgroundBorder {
   border-style: solid;
   border-width: 2px;
   border-radius: 3px;
}

我的小部件.css

@backgroundBorder

Answer 1

我同意。此外，我会在上面的 AppClientBundle 中包含一个接口。

public interface AppClientBundle extends ClientBundle {

  public static final AppClientBundle INSTANCE = GWT.create(AppClientBundle.class);

  @Source({ "css/template/global.css" })
  MyStyle css();
  public interface MyStyle extends CssResource {
    String backgroundBorder();
  }
}

这使您可以以这种方式设置小部件的样式：

Widget.setStylePrimaryName(AppClientBundle.INSTANCE.css().backgroundBorder());

希望有帮助...

Answer 2

您可以使用 ClientBundles 和 CssResources。

https://developers.google.com/web-toolkit/doc/latest/DevGuideClientBundle#CssResource

在您的入口点，您可以设置全局 css。与此类似：

YourStyle.getTheme().getAppClientBundle().getGlobalCss().ensureInjected();

你的clientbundle可能是这样的：

public interface AppClientBundle extends ClientBundle {

    @Source({ "css/template/global.css" })
    CssResource getGlobalCss();

}

根据我的经验，这是最好的方法。