Question

有没有人将自己的CSS风格应用于GWT的NotificationMole。

如果我添加自己的样式名称，那么该样式仅适用于隐藏鼹鼠时未删除的外部DIV，并且我无法将样式应用于内部div ...

Answer 1

一个肮脏的解决方案：

package com.google.gwt.user.client.ui; // important for package visibility access

import com.google.gwt.dom.client.DivElement;
import com.google.gwt.dom.client.SpanElement;

public class NotificationMoleHelper {

    protected NotificationMole notificationMole;

    public NotificationMoleHelper(NotificationMole notificationMole) {
        super();
        this.notificationMole = notificationMole;
    }

    public SpanElement getNotificationText() {
        return notificationMole.notificationText;
    }

    public DivElement getHeightMeasure() {
        return notificationMole.heightMeasure;
    }

public DivElement getBorderElement() {
    return notificationMole.borderElement;
}

    /**
     * Change heightMeasure's background color
     * 
     * @param backgroundColor
     */
    public void setBackgroundColor(String backgroundColor) {

        getBorderElement().getStyle().setBackgroundColor(backgroundColor);
    }
}

示例：

final NotificationMoleHelper notificationMoleHelper = new NotificationMoleHelper(notificationMole);
notificationMoleHelper.setBackgroundColor("#FF1111");

Answer 2

你的NotificationMole有一个关联的ui.xml文件，所以你应该在那里应用你想要应用的任何自定义样式。

Answer 3

这可能很容易：首先定义自己的样式，在初始化NotificationMole之后，只需用你定义的类替换它的内置类，这就是我在项目中所做的。使用DOM替换类或使用gwtquery，两者都可以。

Answer 4

对于某些人来说更可口的另一种选择：

设置mole.getElement().setId("mole");或mole.ensureDebugId("mole")的痣的ID

然后在ui活页夹文件中添加样式：

    width: 200px !important;
        height: 60px !important;
}```

我尝试了没有！importants的情况，但是gwt包含了默认的宽度和高度，所以它没有听我的样式。如果您添加默认情况下不添加gwt的样式，则不需要！important。

如何用CSS设置GWT的NotificationMole样式

4 个答案: