web-dev-qa-db-ja.com

GWTテーマスタイルが私のCSSスタイルをオーバーライドする

独自のCSSを含むいくつかのhtmlファイルがあります。これらをgwtアプリケーションで使用したいので、アプリケーションのhtmlファイルとcssファイルをコピーしました。

問題は、htmlを開いたときにgwtテーマスタイルを使用していることです。たとえば、私のcssでは、htmlの「本体」の背景色は黒ですが、テーマを無効にしない限り、白く見えます。

どうすればgwtテーマスタイルをオーバーライドし、cssスタイルを使用できますか？

cssgwtthemes
31
david

サルファズが言ったように-!importantは、Cascadingスタイルシートの概念全体を無効にするため、最後の手段となる必要があります。

とにかく、GWTでは、選択したテーマに含まれるコアGWTスタイルを簡単にオーバーライドするために、モジュールファイル（ファイル名が* .gwt.xmlで終わるファイル）を見つけて、次の行を見つけます。次のように、テーマを宣言し、カスタム/任意のスタイルシートの後に配置します。

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

ただし、GWT 2.0では CssResource および iBinder をお勧めします。

その他のポインタについては、ドキュメントの 適切なセクション を必ずお読みください。

18
Igor Klimer

GWTメーリングリストのこの post は、代替ソリューションについて説明しています。 CSSファイルを参照する新しいClientBundleを作成する必要があります。

_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(); 
        //...
    }
_

私の意見では、これはスタイルをオーバーライドする最もクリーンで簡単な方法です。

36
tsauerwein

たとえば、htmlファイルの1つにこのcssが含まれている場合、htmlファイルのすべてのcssでキーワード!importantを使用して、GWTのスタイルをオーバーライドできます。

background-color:#000000;

次に、次のように記述します。

background-color:#000000 !important;

HTMLファイルのすべてのスタイルについて同じことを行います。

!importantを使用するのは最善の方法ではないことに注意してください。もしbetterの選択肢が見つかれば、最初にそれらを使用する必要があります。

6
Sarfraz

ソリューション <stylesheet src="CustomStylesheet.css" />は 非推奨 であり、新しいsuperdevmodeでは機能しませんでした。

（GWT 2.7を使用して）私にとってうまくいった解決策は、新しいカスタムテーマを作成することでした。

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（注：パスの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ファイルを抽出できます。

2
H. Hess

!importantの使用に加えて、 CSSセレクターの特定性 を使用することもできます。

GWTスタイルのほとんど（すべて？）は、クラスだけを使用して記述されています。例：

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

これをオーバーライドするには、!importantまたはを使用できます。たとえば、次のように、セレクタをより具体的に指定できます。

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

これはどのように機能しますか？これは、要素名（テーブル）をセレクターのクラスに追加すると、クラスだけではなくより具体的になるため機能します。これは、ヘッダーの下にリストされているスタイルシートからでも、他のスタイルをオーバーライドします。

ウィジェットIDを与え、それらを使用することはさらに具体的です。

2
Damo

私はそれがあまりエレガントではないことを知っていますが、GWTによって生成された出力ファイルのstandard.cssファイルを空のファイルで置き換えることはかなり効果的であることがわかりました。

（Mavenはこれを確実に処理できます。）

2
mxro