CSS 覆盖 GWT 样式

Override GWT Styling

提问by KevMo

I had a beautiful pure HTML mockup for a webpage that I am now recreating in GWT. I'm attempting to use the same css in my GWT app, but that's not working well for me. GWT styles seem to override mine. I know I can completely disable the GWT styles, however I would prefer to have the styling for the GWT components that I'm adding (tab panel, button, etc). Is there a way to disable GWT styling, and only enable it for components that I choose?

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

回答by vitrums

Well I managed to solve the problem with overriding standard css rules by inheriting my project's .cssfile in .gwt.xmlfile of my project. When you set your user defined .cssthis way - AFTER the usual inherit line - it will have the higher priority in cascading one rule than the same rule, defined at standard gwt stylesheets. It took a couple of hours to figure out how to inherit it properly, cause in first try just simply typing <stylesheet src='WebTerminal.css' /&gt; in my .gwt.xmlfile and commenting out <link type="text/css" rel="stylesheet" href="WebTerminal.css">in my .htmlhost page didn't bring me any result. So, the solution is to use relative path, when you set your .cssin .gwt.xmlconfig, like this:

好吧，我设法通过在我的项目.css文件中继承我的项目文件来解决覆盖标准 css 规则的问题.gwt.xml。当您以.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' />

Notice ../in the beginning of my relative path. To figure out how it works, add Window.alert(GWT.getModuleBaseURL());as the first line of your onModuleLoad()method. It will show you something like https://localhost:8080/myproject/resouces/webtermial/, when in fact your hosted page URL would look like https://localhost:8080/myproject/resouces/WebTerminal.html. Here myproject/resouces is a directory, that contains your .cssfile, and when you set it in .gwt.xmllike <stylesheet src='WebTerminal.css' />, the compiler starts looking for myproject/resouces/webtermial/WebTerminal.cssand can't find it. That's why adding ../sometimes is the only thing to do to solve your problem.

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

In addition to the words said above I only want to mention that I was not successful in attempt to find any description of this matter in the latest documentary or throughout the discussions taking place at google groups. Wish it was less harder to figure out, because GWT has much more really complex problems itself, than one, which must have had an exhausted description inside tutorial.

除了上面所说的话，我只想提一下，我试图在最新的纪录片中或在谷歌小组进行的讨论中找到对此事的任何描述都没有成功。希望它不那么难弄清楚，因为 GWT 本身有更复杂的问题，而不是一个，在教程中肯定有一个用尽的描述。

回答by Vladimir

The reason your style is being overridden is that when gwt compiles your project, it includes it's own default css file. The type of css file is dependent on the type of default styling that you are using:

您的样式被覆盖的原因是当 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'/>     -->

In the above scenario, a clean.css file will be included, which, in turn, has the following generic styles that completely offset your template (the margin and background parameters always messed my templates up):

在上面的场景中，将包含一个 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;
}

If you remove them, and leave everything else intact (specifically, if you leave everything that starts with 'gwt'), your template won't be affected.

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

Don't forget -- you have to remove these elements every time you compile your project.

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

Hope this helps.

希望这可以帮助。

回答by DLH

The easiest thing to do is to override the styles you don't want. For example, if you don't want gwt to style your buttons, you can define the style for the gwt-Button class in your own css file.

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

More information here.

更多信息在这里。

回答by Clay Lenhart

There is a special resource you can inherit from to remove the clean.css file:

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

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

So find your *.gwt.xml file and search for

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

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

And replace it with the line above.

并用上面的行替换它。

回答by Duncan Calvert

Solution is actually to create a public/cssfolder in the same directory as your gwt.xml.

解决方案实际上是创建一个公共/ CSS在同一目录下的文件夹gwt.xml。

Add these two lines to your gwt.xml:

将这两行添加到您的gwt.xml：

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

and

和

<public path='public'/>

Place your project-name.cssfile in the cssfolder.

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

This works with both GWT Compileand Super Dev Mode.

这适用于GWT Compile和Super Dev Mode。

回答by Prashanth

Just for anyone else facing a similar situation, to elaborate on the answer that stringo0 answered, I put my styles in the 'GWT_APPNAME.css' where GWT_APPNAME is the name of the file that your GWT Eclipse plugin generates when you create your project.

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

This css file should be available directly under the war folder with the same name as your welcome page html. I tried this for overriding the gwt-anchor styles and it worked.

这个 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;}

回答by Pavel

You can use < !important > declaration. It's one of easiest choices

您可以使用 <!important> 声明。这是最简单的选择之一

--- GWT ----

--- GWT ----

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

--- Custom style ---

--- 自定义样式 ---

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

--- Result ---

- - 结果 - -

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

回答by Milo

Vitrus' answer did work for me, thanks! However changes in the .css files were not reflected in the web app when reloading the page; it seems to be a cache issue. Refreshing with Ctrl+F5 solves this. More information here: http://productforums.google.com/forum/#!topic/chrome/_oCbvfRwTok.

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

回答by drginm

I had a similar problem trying to set a background image and setting a transparent background for the body element, I solved it by setting a specific style to the element so I could keep the other GWT styles:

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

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

#elementId {
   background: transparent;
}

Hope it's useful for your specific problem.

希望它对您的特定问题有用。

回答by stringo0

This is a quick, but hopefully helpful answer.

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

What I did is I copied over the styles I do want from the default GWT Style. For example, if you picked the standard style, GWT makes a standard.css in the war/WEB-INF/appengine-generated (somewhere along those lines) - I copied over all the button styles to my app's css file, and then in the config file chose not to use the standard GWT style.

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

This did the trick for us.

这对我们有用。