Стиль темы GWT перекрывает мой стиль CSS

Question

У меня есть несколько HTML-файлов с собственным CSS. Я хочу использовать их в приложении gwt, поэтому я скопировал html и css файлы в приложение.

Проблема в том, что когда я открываю html, он использует стиль темы gwt. Например, в моем CSS цвет фона html 'body' черный, но он выглядит белым, если я не деактивирую тему.

Как я могу переопределить стиль темы gwt и использовать мои стили CSS?

Answer 1

Эта запись в списке рассылки 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();
}

И затем в вашем onModuleLoad() методе вы должны ввести файл CSS:

public class YourApp implements EntryPoint {

    public void onModuleLoad() {
        //...
        Resources.INSTANCE.css().ensureInjected(); 
        //...
    }

На мой взгляд, это самый простой и простой способ переопределить стили.

Answer 2

Как сказал Сарфаз - !important должно быть вашим последним средством, поскольку оно как бы побеждает всю концепцию Каскадных Таблиц стилей.

В любом случае, в GWT, чтобы легко переопределить основные стили GWT, содержащиеся в выбранной вами теме, вы должны найти файл модуля (тот, который имеет имя, оканчивающееся на * .gwt.xml), а затем найти строка, где вы объявляете свою тему и помещаете свою собственную / любую таблицу стилей после , например:

<inherits name='com.google.gwt.user.theme.standard.Standard' />
<stylesheet src="CustomStylesheet.css" />

Обратите внимание, однако, что для GWT 2.0 CssResource и UiBinder рекомендуется.

Обязательно прочитайте соответствующий раздел документации для получения дополнительных указателей.

Answer 3

Вы можете переопределить стили GWT, используя ключевое слово !important во всех ваших CSS файлах HTML, например, если один из ваших файлов HTML содержит этот файл CSS:

background-color:#000000;

Тогда вы должны написать это так:

background-color:#000000 !important;

Сделайте то же самое для всех ваших стилей в HTML-файлах.

Обратите внимание, что использование !important не лучший способ, если вы можете найти какие-либо лучшие альтернативы, вы должны сначала обратиться к ним.

Answer 4

Решение <stylesheet src="CustomStylesheet.css" /> устарело и не работало с новым супер-режимом.

Решение, которое работало для меня (с использованием GWT 2.7), заключалось в создании новой пользовательской темы:

projectPackage / темы / MyCustomTheme / MyCustomTheme.gwt.xml

<module>
    <stylesheet src="gwt/MyCustomTheme/MyCss.css"/>
</module>

projectPackage / темы / MyCustomTheme / MyCustomThemeRessources.gwt.xml

</module>

projectPackage / темы / MyCustomTheme / государственные / GWT / MyCustomTheme / MyCss.css (Примечание: удаление gwt / MyCustomTheme / части пути работало в devmode, но не работало в развернутой версии, потому что вы все равно можете переименовать MyCustomTheme по своему вкусу)

Файл CSS, который вы хотите использовать

Project.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>

Примечание. Вы можете получить образец пользовательской темы, используя http://gwt -theme-generator.appspot.com / и распаковав загруженный файл .jar.

Answer 5

Я знаю, что это не очень элегантно, но я нашел довольно эффективным заменить файл standard.css в выходных файлах, сгенерированных GWT, на пустой файл .

(Maven может позаботиться об этом надежно.)

Answer 6

В дополнение к использованию !important вы также можете положиться на CSS Selectorificity .

Большинство (все?) Стилей GWT указаны с использованием только класса, например:

.gwt-DisclosurePanel .header {
    color: black;
    cursor: pointer;
    text-decoration: none;
}

Чтобы переопределить это, вы можете использовать !important или , вы можете быть более точным в своих селекторах, например:

table.gwt-DisclosurePanel .header {
    text-decoration: underline;
}

Как это работает? Это работает, потому что добавление имени элемента (таблицы) в класс в селекторе делает его более конкретным, чем просто один класс. Это заменит другие стили даже из таблиц стилей, перечисленных ниже в заголовке.

Предоставление идентификаторов ваших виджетов и их использование еще более конкретны.