Question

我有一个漂亮的纯HTML模型用于网页，我现在正在GWT中重新创建。我试图在我的GWT应用程序中使用相同的CSS，但这对我来说效果不佳。 GWT风格似乎超越了我的风格。我知道我可以完全禁用GWT样式，但是我更喜欢为我添加的GWT组件设置样式（选项卡面板，按钮等）。有没有办法禁用GWT样式，只为我选择的组件启用它？

Answer 1

我通过在项目的.css文件中继承项目的.gwt.xml文件，设法解决了覆盖标准css规则的问题。当您以这种方式设置用户定义.css时 - 在通常的继承行之后 - 它在级联一个规则时具有比在标准gwt样式表中定义的相同规则更高的优先级。花了几个小时才弄清楚如何正确地继承它，因为首先只需输入<stylesheet src='WebTerminal.css' /&gt;在我的.gwt.xml文件中，在<link type="text/css" rel="stylesheet" href="WebTerminal.css">主页中注释.html并没有给我带来任何结果。因此，解决方案是使用相对路径，当您在.css配置中设置.gwt.xml时，如下所示：

<stylesheet src='../WebTerminal.css' />

在我的相对路径的开头注意../。要弄清楚它的工作原理，请添加Window.alert(GWT.getModuleBaseURL());作为onModuleLoad()方法的第一行。它会显示https://localhost:8080/myproject/resouces/webtermial/之类的内容，实际上您的托管网页网址看起来像https://localhost:8080/myproject/resouces/WebTerminal.html。这里myproject / resouces是一个包含.css文件的目录，当你在.gwt.xml <stylesheet src='WebTerminal.css' />中设置它时，编译器开始寻找myproject/resouces/webtermial/WebTerminal.css而不能找到它。这就是为什么有时添加../是解决问题的唯一方法。

除了上面提到的话，我只想提一下，我没有成功地试图在最新的纪录片或谷歌团体的讨论中找到关于这个问题的任何描述。希望它不那么难以理解，因为GWT本身有更多非常复杂的问题，而不是一个，它必须在教程中有一个用尽的描述。

Answer 2

你的风格被覆盖的原因是当gwt编译你的项目时，它包含它自己的默认css文件。 css文件的类型取决于您使用的默认样式的类型：

<inherits name='com.google.gwt.user.theme.clean.Clean'/>
<!-- <inherits name='com.google.gwt.user.theme.standard.Standard'/> -->
<!-- <inherits name='com.google.gwt.user.theme.chrome.Chrome'/> -->
<!-- <inherits name='com.google.gwt.user.theme.dark.Dark'/>     -->

在上面的场景中，将包含一个clean.css文件，该文件又具有以下通用样式，完全抵消了您的模板（边距和背景参数总是弄乱我的模板）：

body, table td, select, button {
  font-family: Arial Unicode MS, Arial, sans-serif;
  font-size: small;
}
pre {
  font-family: "courier new", courier;
  font-size: small;
}
body {
  color: black;
 margin: 10px;
 border: 0px;
 padding: 0px;
 background: #fff;
 direction: ltr;
}
a, a:visited {
  color: #0066cc;
  text-decoration:none;
}

a:hover {
  color: #0066cc;
  text-decoration:underline;
}

select {
    background: white;
}

如果您删除它们，并保留其他所有内容（特别是，如果您保留以“gwt”开头的所有内容），则您的模板不会受到影响。

不要忘记 - 每次编译项目时都必须删除这些元素。

希望这会有所帮助。

Answer 3

最简单的方法是覆盖你不想要的样式。例如，如果您不希望gwt为您的按钮设置样式，您可以在自己的css文件中定义gwt-Button类的样式。

更多信息here。

Answer 4

您可以继承一个特殊资源来删除clean.css文件：

<inherits name='com.google.gwt.user.theme.standard.StandardResources'/>

所以找到你的* .gwt.xml文件并搜索

<inherits name='com.google.gwt.user.theme.standard.Standard'/>

并将其替换为上面的一行。

Answer 5

你可以使用＆lt; ！important＆gt;宣言。这是最简单的选择之一

--- GWT ----

.gwt-PopupPanel {
border: 3px solid #E7E7E7;
padding: 3px;
background: white;
}

---自定义风格---

.gwt-PopupPanel {
padding: 0px !important;
}

---结果---

.gwt-PopupPanel {
border: 3px solid #E7E7E7;
padding: 0px;
background: white;
}

Answer 6

解决方案实际上是在与gwt.xml相同的目录中创建 public / css 文件夹。

将这两行添加到 gwt.xml ：

<stylesheet src='css/project-name.css'/>

和

<public path='public'/>

将 project-name.css 文件放在 css 文件夹中。

适用于GWT Compile和Super Dev Mode。

Answer 7

对于遇到类似情况的其他人，要详细说明stringo0回答的答案，我将我的样式放在'GWT_APPNAME.css'中，其中GWT_APPNAME是您创建时GWT Eclipse插件生成的文件的名称项目

此css文件应该直接在war文件夹下提供，其名称与欢迎页面html相同。我试着用它来覆盖gwt-anchor样式，但它确实有效。

.gwt-Anchor:link {color:#FF0000;}
.gwt-Anchor:visited {color:#00FF00;}
.gwt-Anchor:hover {color:#FF00FF;}
.gwt-Anchor:active {color:#0000FF;}

Answer 8

这是一个快速但希望有用的答案。

我所做的是从默认的GWT Style复制了我想要的样式。例如，如果您选择了标准样式，GWT会在war / WEB-INF / appengine生成（在这些行的某个位置）生成一个standard.css - 我将所有按钮样式复制到我的应用程序的css文件中，然后在配置文件选择不使用标准GWT样式。

这对我们起了作用。

Answer 9

您可以使用以下选项删除默认的GWT样式：

widget.setStyleName("");

或指定自己的风格。

Answer 10

Vitrus的回答对我有用，谢谢！但重新加载页面时，.css文件中的更改未反映在Web应用程序中;它似乎是一个缓存问题。使用Ctrl + F5刷新解决了这个问题。更多信息请点击此处：http://productforums.google.com/forum/#!topic/chrome/_oCbvfRwTok。

Answer 11

我在尝试设置背景图像并为body元素设置透明背景时遇到了类似的问题，我通过为元素设置特定样式来解决它，因此我可以保留其他GWT样式：

<body id="elementId">...</body>

#elementId {
   background: transparent;
}

希望它对您的具体问题有用。

Answer 12

在gwt，2.6中，生成的JavaScript源代码中有一个名为（gwt）的文件夹，它包含所有样式。

尝试删除它。

覆盖GWT样式

12 个答案: