如何在GWT / Bootstrap中覆盖CSS样式？

Question

我刚开始端口Twitter的引导到GWT （见GitHub的项目在这里和一个非常难看的演示在这里 ），但是，我有一个日志的自举风格VS GWT风格的问题。

Bootstrap在tr / td元素中放置了一个边界，而GWT组件基本上在任何地方都使用表。 在演示中，您可以在左侧VerticalPanel中看到该错误。

因此，我一直在寻找一种使GWT组件忽略引导程序样式的方法，而且我不知道该怎么做。

有没有简单的方法可以使其正常工作？

提前致谢。

Answer 1

您可以简单地将样式添加到您的根GWT对象之一，然后简单地覆盖引导程序样式以消除这些混乱的边界：

<div class="gwt">
   ... some other GWT-content
</div>

并在您的CSS中：

.gwt tr, .gwt td {
    border-top: 0px;
}

当然，如果您需要在GWT元素中嵌入一些引导元素，那么您将不得不四处寻找并执行以下操作：

<div class="gwt">
   ... some other GWT-content
   <div class="bootstrap">...
        ... Bootstrap elements
   </div>
</div>

并在您的CSS中：

.bootstrap tr, .bootstrap td {
    border-top: 1px; // Whatever bootstrap style puts
}

Answer 2

在GWT中使用链接器可以执行某些操作，但有些复杂。 高层次的想法是：

1. 将所有GWT组件放入<div id =“ gwt”> ... </ div>
2. 将链接器添加到将处理CSS文件的GWT模块文件。
3. 在链接器中，转换GWT CSS（例如standard.css）以在每个选择器规则之前插入#gwt。

第一部分很简单，只需向根元素添加一个id。

第二部分也很简单，只需向Module.gwt.xml文件中添加如下所示的代码：

<define-linker name="cssLinker" class="com.you.bootstrap.linker.CssRenamingLinker" />
<add-linker name="cssLinker"/>

困难的部分是实现链接器。 可以手动解析它，但是您可能会发现使用SAC之类的东西更容易。

使用链接器，可以通过在每个选择器之前插入#gwt来转换CSS。 使用SAC，您可以通过重写所有DocumentHandler方法以将其每个参数简单地发送到OutputStream来实现。 在DocumentHandler.startSelector（）中，您将首先在每个选择器之前发出“ #gwt”。

[编辑]假设GWT的standard.css定义了覆盖引导样式的样式。 如果没有，您可能必须使用默认设置来“增强” GWT CSS。 有W3C推荐的缺省值的列表在这里 。

这样做的好处是可以防止将来发生变化-如果GWT样式更改，或者引导样式更改，则该标记应很健壮。

希望能有所帮助，

亚当