Question

在CssResource中，我可以从同一个方法返回多个样式类名吗？

[请原谅代码中的任何错误 - 我正试图在家里，从记忆中重新创建]。我有以下库代码（我无法更改）：

void render(ClientBundle1 bundle) {
    setInnerHtml("<div class=\" + bundle.css().style() + \"/>");
}

捆绑是直截了当的：

interface ClientBundle1 extends ClientBundle {
    @Source("css1.css")
    CssResource1 css();
}

和css资源：

interface CssResource1 extends CssResource {
    style1();
}

和css1.css：

.style1 {width=10; height=20}

现在 - 我希望_ 部分 _覆盖“style1”与我自己的css（css2.css）的另一种样式（仅覆盖高度，而不是宽度）。但是，我的css2.css声明如下：

.style2 {height=30}

所以我想用css2.style2（不同的类名）部分覆盖css1.style1。

如果这是vanilla HTML，我只会写：

...导入css1然后css2 ...

  <div class="style1 style2"/>

然而，由于这是GWT，我需要这样的东西：

interface ClientBundle2 extends ClientBundle1 {
    @Source("css1.css", "css2.css")
    CssResource2 css();
}

和css资源：

interface CssResource2 extends CssResource1 {
    @Classname("style1", "style2")
    style();
}

但当然，GWT无法实现上述目标。

有没有办法为每个样式方法分配两个样式类名？

Answer 1

有几个选项，其中没有一个是你要求的：

添加多个类：

正如您所说的<div class="style1 style2"/>一样，无论您何时应用该样式，都要添加两种样式。如果在UiBinder中，执行类似<g:Widget addStyleNames="{css.style1} {css.style2}" />的操作，如果是在Java中，只需添加两个类：

widget.addStyleNames(css.style1() + " " + css.style2());

或

widget.addStyleNames(css.style1());
widget.addStyleNames(css.style2());

仅覆盖该样式：

为什么style1或style2不能有多个样式规则？有几种方法，取决于你的目标：

css1.css：

.style1 {width:10px; height:20px}

和css2.css：

.style1 {height:30px}

在此CssResource / ClientBundle中使用：

interface CssResource2 extends CssResource1 {
    String style();
}
interface MyClientBundle extends ClientBundle {
    @Source({"css1.css", "css2.css}) 
    CssResource2 css();
}

会导致这种风格（或多或少）：

.style1 {width:10px; height:30px}

由于后来具有相同权重的CSS规则会覆盖之前的那些。

或者，例如：

css1.css：

.style1, .style2 {width:10px; height:20px}

css2.css：

.style2 {height:30px}

会导致style1为10x20的任何内容，而style2的任何内容都为10x30。 @ClassName注释可用于使CssResource2或多或少地忽略先前定义的样式。

GWT：为同一个CSS字段返回多个样式

1 个答案:

添加多个类：

仅覆盖该样式：