用gwt中的另一个CSS样式覆盖CSS样式

Question

I need to override css style for a particular element with another css file's style in gwt.

I have tried by the following code

    sendButton.addStyleName("sendButton");
    Window.alert("test");
    sendButton.addStyleName("butt");

The alert is coming. but the style has not been overridden. the css code is .sendButton { display: block; font-size: 16pt; color:red; } .butt{ font-size:32pt; visible:false; color:green; } the button font is in red colour only it is not changed to green. i have included this css in html file as well.

so please tell me how to override one css style by another css file's style in gwt.

Thanks in advance

Answer 1

If this is the style that you want applied to all buttons, you can override the style the GWT applies to all buttons: gwt-Button .

Alternatively, try:

color: red !important;

or be more specific with your CSS selector so that other CSS rules do not take precedence.

Answer 2

I am assuming the .gwt-button and .gwt-Button-selected are the default style names(provided by GWT) of you button.

You can do sth like below. Here I have removed some css properties(all properties are random here). You should write these css properties in your UIBinder.

@external .gwt-Button;
    .gwt-Button {
      cursor: pointer;
      cursor: hand;
      color: #3e3e3e;
      font-weight: bold;
      text-align: center;
      background: white;
      margin-top: -6px;
      margin-top: -33px;
      margin-left: -1px;
    }
    @external .gwt-Button-selected;
    .gwt-Button .gwt-Button-selected {
      cursor: default;
      background: white;
    }

Answer 3

Try this

 sendButton.addStyleName("sendButton");
 Window.alert("test");
 sendButton.setStyleName("butt");

setStyleName Clears all of the object's style names and sets it to the given style.