Le style de thème GWT remplace mon style css

Question

J'ai des fichiers HTML avec leurs propres fichiers css. Je veux les utiliser dans une application GWT, donc j'ai copié les fichiers HTML et CSS dans l'application.

Le problème est que lorsque j'ouvre le code HTML, il utilise le style de thème GWT. Par exemple, dans mon css, la couleur de fond html 'body' est en noir, mais elle est blanche à moins que je ne désactive le thème.

Comment pourrais-je remplacer le style de thème GWT et utiliser mes styles CSS?

Answer 1

Ce post sur le GWT liste de diffusion décrit une solution de rechange. Vous devez créer un nouveau ClientBundle qui fait référence à votre fichier 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();
}

Et puis à l'intérieur de votre onModuleLoad() méthode, vous devez injecter le fichier CSS:

public class YourApp implements EntryPoint {

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

À mon avis, c'est la plus propre et la plus simple pour remplacer les styles.

Answer 2

Comme Sarfaz dit - !important devrait être votre dernier recours, car elle genre de défaites le concept de Cascade des Feuilles de Style.

De toute façon, dans GWT, afin de pouvoir facilement remplacer le noyau GWT styles contenus dans le thème que vous avez sélectionné, vous devez localiser votre fichier de module (celui qui a un nom de fichier se terminant sur *.gwt.xml), puis recherchez la ligne où vous déclarez votre thème et de mettre votre custom/quelle que soit la feuille de style après , comme ceci:

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

Notez, cependant, que pour GWT 2.0 CssResource et UiBinder est recommandé.

Assurez-vous de lire la section appropriée de la documentation pour plus de pointeurs.

Answer 3

Vous pouvez remplacer les styles de GWT en utilisant le mot clé !important dans tous vos fichiers CSS des fichiers HTML, par exemple, si l'un de vos fichiers HTML contient ce fichier CSS:

 background-color:#000000;
 

Ensuite, vous devriez l'écrire comme ceci:

 background-color:#000000 !important;
 

Faites la même chose pour tous vos styles dans les fichiers HTML.

Notez que l'utilisation de !important n'est pas la meilleure solution. Si vous pouvez trouver de meilleures alternatives, vous devriez les chercher en premier.

Answer 4

En plus de l'utilisation de !important vous pouvez également vous appuyer sur le Sélecteur CSS Spécificité.

La plupart (tous?) de l'GWT styles sont exprimés à l'aide seulement de la classe par exemple:

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

Pour remplacer ce que vous pouvez utiliser !important ou vous pouvez être plus précis dans vos sélecteurs par exemple:

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

Comment cela fonctionne? Cela fonctionne car l'ajout du nom de l'élément (tableau) de la classe dans le sélecteur de fait, il est plus que juste la classe seul. Cela va remplacer d'autres styles, même à partir de feuilles de style énumérés plus bas dans l'en-tête.

Donner vos widgets Id et l'utilisation de celles-ci est encore plus spécifique.

Answer 5

Je sais que ce n'est pas très élégant, mais j'ai trouvé assez efficace de remplacer le fichier standard.css dans les fichiers de sortie générés par GWT par un fichier vide .

(Maven peut s'en occuper de manière fiable.)