GWT 主题样式覆盖了我的 css 样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2322779/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
GWT theme style overrides my css style
提问by david
I have some html files with their own css. I want to use them in a gwt application so i copied the html and the css files in the application.
我有一些带有自己 css 的 html 文件。我想在 gwt 应用程序中使用它们，所以我复制了应用程序中的 html 和 css 文件。
The problem is when i open the html it uses the gwt theme style. For example in my css the html 'body' background color is black, but it looks white unless i deactivate the theme.
问题是当我打开 html 时，它使用了 gwt 主题样式。例如，在我的 css 中，html 'body' 背景颜色是黑色，但它看起来是白色的，除非我停用主题。
How could I override the gwt theme style and use my css styles?
如何覆盖 gwt 主题样式并使用我的 css 样式？
采纳答案by Igor Klimer
Like Sarfaz said - !importantshould be your last resort as it kind of defeats the whole concept of CascadingStyle Sheets.
就像 Sarfaz 所说 -!important应该是你最后的手段，因为它有点违背了级联样式表的整个概念。
Anyway, in GWT, in order to easily override the core GWT styles contained in the theme you selected, you should locate your module file (the one that has a file name ending on *.gwt.xml), then locate the line where you declare your theme and put your custom/whatever stylesheet afterit, like this:
无论如何，在 GWT 中，为了轻松覆盖您选择的主题中包含的核心 GWT 样式，您应该找到您的模块文件（文件名以 *.gwt.xml 结尾的文件），然后找到您所在的行声明您的主题并在其后放置您的自定义/任何样式表，如下所示：
<inherits name='com.google.gwt.user.theme.standard.Standard' />
<stylesheet src="CustomStylesheet.css" />
Note, however, that for GWT 2.0 CssResourceand UiBinderis recommended.
但是请注意，建议使用GWT 2.0CssResource和UiBinder。
Be sure to read the appropriate sectionof the docs for more pointers.
请务必阅读文档的相应部分以获取更多指示。
回答by tsauerwein
This poston the GWT mailing list describes an alternative solution. You have to create a new ClientBundlewhich references your CSS file:
GWT 邮件列表上的这篇文章描述了一种替代解决方案。您必须创建一个ClientBundle引用您的 CSS 文件的新文件：
import com.google.gwt.core.client.GWT;
import com.google.gwt.resources.client.ClientBundle;
import com.google.gwt.resources.client.CssResource;
public interface Resources extends ClientBundle {
public static final Resources INSTANCE = GWT.create(Resources.class);
@Source("style.css")
@CssResource.NotStrict
CssResource css();
}
And then inside your onModuleLoad()method you have to injectthe CSS file:
然后在您的onModuleLoad()方法中，您必须注入CSS 文件：
public class YourApp implements EntryPoint {
public void onModuleLoad() {
//...
Resources.INSTANCE.css().ensureInjected();
//...
}
In my opinion this is the cleanest and easiest way to override the styles.
在我看来，这是覆盖样式的最干净和最简单的方法。
回答by Sarfraz
You can override the styles of GWT by using the keyword !importantin all your css of the html files, for example, if one of your html file contains this css:
您可以通过!important在 html 文件的所有 css 中使用关键字来覆盖 GWT 的样式，例如，如果您的 html 文件之一包含此 css：
background-color:#000000;
Then you should write it like this:
那么你应该这样写：
background-color:#000000 !important;
Do the same for all your styles in html files.
对 html 文件中的所有样式执行相同操作。
Note that using !importantis not the best way, if you can find any betteralternatives you should go for them first.
请注意，使用!important不是最好的方法，如果你能找到更好的替代品，你应该首先选择它们。
回答by Damo
In addition to using !importantyou can also rely on CSS Selector Specificity.
除了使用之外，!important您还可以依赖CSS Selector Specificity。
Most (all?) of the GWT styles are stated using just class eg:
大多数（全部？）GWT 样式仅使用类进行说明，例如：
.gwt-DisclosurePanel .header {
color: black;
cursor: pointer;
text-decoration: none;
}
To override this you can use !importantoryou can be more specific in your selectors eg:
要覆盖它，您可以使用!important或者您可以在选择器中更具体，例如：
table.gwt-DisclosurePanel .header {
text-decoration: underline;
}
How does this work?This works because adding the element name (table) to the class in the selector makes it more specific than just the class alone. This will override other styles even from stylesheets listed lower in the header.
这是如何运作的？这是有效的，因为将元素名称（表）添加到选择器中的类使其比单独的类更具体。这将覆盖其他样式，即使是来自标题中下方列出的样式表。
Giving your widgets IDs and using those is even more specific.
提供您的小部件 ID 并使用它们更加具体。
回答by mxro
I know it's not very elegant but I found it rather effective to replace the standard.cssfile in the output files generated by GWT with an empty file.
我知道这不是很优雅，但我发现standard.css用空文件替换GWT 生成的输出文件中的文件相当有效。
(Maven can take care of that reliably.)
（Maven 可以可靠地处理这个问题。）
回答by H. Hess
The solution <stylesheet src="CustomStylesheet.css" />is deprecatedand did not work with the new superdevmode.
该解决方案<stylesheet src="CustomStylesheet.css" />已被弃用，并且不适用于新的超级开发模式。
A solution that worked for me (using GWT 2.7) was to create a new custom theme:
对我有用的解决方案（使用 GWT 2.7）是创建一个新的自定义主题：
projectPackage/themes/MyCustomTheme/MyCustomTheme.gwt.xml
projectPackage/themes/MyCustomTheme/MyCustomTheme.gwt.xml
<module>
<stylesheet src="gwt/MyCustomTheme/MyCss.css"/>
</module>
projectPackage/themes/MyCustomTheme/MyCustomThemeRessources.gwt.xml
projectPackage/themes/MyCustomTheme/MyCustomThemeRessources.gwt.xml
</module>
projectPackage/themes/MyCustomTheme/public/gwt/MyCustomTheme/MyCss.css(Note: removing the gwt/MyCustomTheme/ part of the path worked in devmode but didn't work in deployed version, of cause you can still rename 'MyCustomTheme' to something of your liking)
projectPackage/themes/MyCustomTheme/public/gwt/MyCustomTheme/MyCss.css（注意：删除 gwt/MyCustomTheme/ 在 devmode 中工作但在部署版本中不起作用的路径的一部分，因为您仍然可以将“MyCustomTheme”重命名为你喜欢的东西）
The css file you want to use
您要使用的 css 文件
Project.gwt.xml
项目.gwt.xml
<!DOCTYPE module PUBLIC "-//Google Inc.//DTD Google Web Toolkit 2.0//EN"
"http://google-web-toolkit.googlecode.com/svn/releases/2.0/distro-source/core/src/gwt-module.dtd">
<module rename-to="Project">
(...)
<!-- Inherit GWT theme. e.g. the Clean theme -->
<inherits name='com.google.gwt.user.theme.clean.Clean'/>
<!-- Our custom theme -->
<inherits name='projectPackage.themes.MyCustomTheme.MyCustomTheme'/>
(...)
</module>
Note: You can get a sample custom theme using http://gwt-theme-generator.appspot.com/and extracting the downloaded .jar file.
注意：您可以使用http://gwt-theme-generator.appspot.com/并提取下载的 .jar 文件来获取示例自定义主题。
