Question

Gwt使用标准化的css类名称，例如

.gwt-Image 
.gwt-Button

等等。这使我无法将这些类与流行的css框架（如bootstrap）一起使用。

有没有办法可以覆盖这些默认样式名称并使用bootstrap或基础兼容的类名？

Answer 1

如果你使用LESS作为CSS预处理器，你可以将bootstrap mixins扩展到你的GWT类

例如：

.gwt-Button {
    .btn(); //This is the bootstrap mixin for buttons
}

呈现给：

    .gwt-Button{
       display: inline-block;
       margin-bottom: 0;
       font-weight: normal;
       text-align: center;
       vertical-align: middle;
       touch-action: manipulation;
       cursor: pointer;
       background-image: none;
       border: 1px solid transparent;
       white-space: nowrap;
       padding: 6px 12px;
       font-size: 14px;
       line-height: 1.42857143;
       border-radius: 4px;
       -webkit-user-select: none;
       -moz-user-select: none;
       -ms-user-select: none;
       user-select: none;
    }

这有点费时，但它可以让你拥有CSS中的所有内容

Answer 2

看起来您可以使用addStyleName方法添加自己的类名：

从他们的Stock Widget示例：

// Add styles to elements in the stock list table.
stocksFlexTable.getRowFormatter().addStyleName(0, "watchListHeader");

只需将Bootstrap中使用的类名添加到相关元素中即可。

http://www.gwtproject.org/doc/latest/tutorial/style.html

Answer 3

所有小部件都有setStyleName方法。您可以在创建窗口小部件的任何地方调用它。或者，您可以扩展已使用的GWT类并在构造函数中调用setStyleName。

public class Button extends com.google.gwt.user.client.ui.Button { 
     public Button() {
          setStyleName("my-stale-name");
     }

}

覆盖gwt中的默认小部件类名称

3 个答案: