Стиль темы GWT переопределяет мой стиль css

Ответ 1

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

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

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

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

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

Ответ 2

Этот пост в списке рассылки 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() вы должны inject CSS файл:

public class YourApp implements EntryPoint {

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

По-моему, это самый чистый и простой способ переопределить стили.

Ответ 3

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

background-color:#000000;

Затем вы должны написать это следующим образом:

background-color:#000000 !important;

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

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

Ответ 4

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

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

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

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

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

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

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

Ответ 5

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

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

Ответ 6

Решение <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.