para - El estilo de tema GWT anula mi estilo css

etiquetas css pdf

Question

Tengo algunos archivos html con su propio CSS. Quiero usarlos en una aplicación gwt así que copié los archivos html y css en la aplicación.

El problema es cuando abro el html usa el estilo del tema gwt. Por ejemplo, en mi CSS el color de fondo del ''cuerpo'' html es negro, pero se ve blanco a menos que desactive el tema.

¿Cómo podría anular el estilo del tema gwt y usar mis estilos CSS?

Answer 1

Además de usar !important , también puede confiar en CSS Selector Specificity .

La mayoría (¿todos?) De los estilos de GWT se establecen utilizando solo una clase, por ejemplo:

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

Para anular esto, puede usar !important o puede ser más específico en sus selectores, por ejemplo:

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

¿Como funciona esto? Esto funciona porque agregar el nombre del elemento (tabla) a la clase en el selector lo hace más específico que solo la clase sola. Esto anulará otros estilos incluso de las hojas de estilo enumeradas más abajo en el encabezado.

Dar las identificaciones de tus widgets y usarlas es aún más específico.

Answer 2

Esta post en la lista de correo de GWT describe una solución alternativa. ClientBundle crear un nuevo ClientBundle que ClientBundle referencia a su archivo 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();
}

Y luego, dentro de su método onModuleLoad() , debe inject el archivo CSS:

public class YourApp implements EntryPoint {

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

En mi opinión, esta es la forma más limpia y fácil de anular los estilos.

Answer 3

La solución <stylesheet src="CustomStylesheet.css" /> está en deprecated y no funcionaba con el nuevo superdevmode.

Una solución que funcionó para mí (usando GWT 2.7) fue crear un nuevo tema personalizado:

projectPackage / themes / MyCustomTheme / MyCustomTheme.gwt.xml

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

projectPackage / themes / MyCustomTheme / MyCustomThemeRessources.gwt.xml

</module>

projectPackage / themes / MyCustomTheme / public / gwt / MyCustomTheme / MyCss.css (Nota: la eliminación de gwt / MyCustomTheme / parte de la ruta funcionó en devmode pero no funcionó en la versión implementada, por lo que aún puede cambiar el nombre de ''MyCustomTheme'' a algo de tu agrado)

El archivo css que quieres usar

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>

Nota: Puede obtener un tema personalizado de muestra usando http://gwt-theme-generator.appspot.com/ y extrayendo el archivo .jar descargado.

Answer 4

Puede anular los estilos de GWT utilizando la palabra clave !important en todos sus css de los archivos html, por ejemplo, si uno de los archivos html contiene este css:

background-color:#000000;

Entonces deberías escribirlo así:

background-color:#000000 !important;

Haga lo mismo para todos sus estilos en archivos html.

Tenga en cuenta que usar !important no es la mejor manera, si puede encontrar mejores alternativas, primero debe buscarlas.

Answer 5

Sé que no es muy elegante, pero me pareció bastante efectivo reemplazar el archivo standard.css en los archivos de salida generados por GWT con un archivo vacío .

(Maven puede encargarse de eso de manera confiable).

Answer 6

Como dijo Sarfaz, !important debería ser tu último recurso, ya que de alguna manera vence el concepto de las Hojas de Estilo en Cascada.

De todos modos, en GWT, para anular fácilmente los estilos principales de GWT contenidos en el tema que seleccionó, debe ubicar el archivo del módulo (el que tiene un nombre de archivo que termina en * .gwt.xml), luego busque la línea donde se encuentra declare su tema y coloque su hoja de estilo personalizada / cualquiera después de esta, como esta:

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

Sin embargo, CssResource cuenta que para GWT 2.0 se recomienda CssResource y UiBinder .

Asegúrese de leer la sección correspondiente de los documentos para obtener más indicadores.