覆盖GWT样式 [英] Override GWT Styling
问题描述
我有一个漂亮的纯HTML模型的网页，我现在在GWT重新创建。我试图在我的GWT应用程序中使用相同的CSS，但这不工作，对我来说。 GWT样式似乎覆盖我的。我知道我可以完全禁用GWT样式，但我更喜欢为我添加的GWT组件（选项卡面板，按钮等）的样式。是否有一种方法可以禁用GWT样式，并只为我选择的组件启用它？
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?
推荐答案
通过在项目的 .gwt.xml 文件中继承我的项目的 .css 文件，覆盖标准css规则的问题。当你设置用户定义 .css 这种方式 - 在通常的继承线之后 - 级联一个规则的优先级高于同一个规则，在标准gwt样式表。
花了几个小时来弄清楚如何继承它，导致在第一次尝试只是简单地键入< stylesheet src ='WebTerminal.css'/& gt ;在我的 .gwt.xml 文件中，并注释掉< link type =text / css =stylesheethref =WebTerminal.css > 在我的 .html 主机页没有给我任何结果。
所以，解决方案是使用相对路径，当你设置 .css 在 .gwt.xml config，像这样：
Well I managed to solve the problem with overriding standard css rules by inheriting my project's .css file in .gwt.xml file of my project. When you set your user defined .css this 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' /> in my .gwt.xml file and commenting out <link type="text/css" rel="stylesheet" href="WebTerminal.css"> in my .html host page didn't bring me any result.
So, the solution is to use relative path, when you set your .css in .gwt.xml config, like this:
<stylesheet src='../WebTerminal.css' />
注意 ../ 我的相对路径。为了弄清楚它是如何工作的，添加 Window.alert（GWT.getModuleBaseURL（））; 作为 onModuleLoad c $ c>方法。它会显示你像 https：// localhost：8080 / myproject / resouces / webtermial / ，实际上你的托管页面URL看起来像 https：// localhost：8080 / myproject / resouces / WebTerminal.html 。
这里myproject / resouces是一个目录，它包含你的 .css 文件，当你在 .gwt.xml 像< stylesheet src ='WebTerminal.css'/> ，编译器开始查找 myproject / resouces / webtermial / 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 .css file, and when you set it in .gwt.xml like <stylesheet src='WebTerminal.css' />, the compiler starts looking for myproject/resouces/webtermial/WebTerminal.css and can't find it. That's why adding ../ sometimes is the only thing to do to solve your problem.
上面的话我只想提到我没有成功地尝试在最新的纪录片或整个在google集团进行的讨论中找到这件事的任何描述。希望它不那么难以弄清楚，因为GWT有一个非常复杂的问题本身，比一个，它必须有一个穷尽的描述里面的教程。
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样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
