web-dev-qa-db-ja.com

CSSを使用したPrimefacesスタイリングコンポーネントクラス

CSSを使用してコンポーネントのプロパティを変更するにはどうすればよいですか？

2つのボタンがあるとしましょう：

<p:commandButton id="mySmallButton" styleClass="smallButton">
<p:commandButton id="myButton">

すべてのボタンにfont-size: 14px;を付けたいので、次のルールを追加しました。

.ui-button .ui-button-text{
   font-size:14px;
}

しかし、私のsmallButtonはサイズが異なるはずなので、次のように追加しました。

.smallButton{
   font-size:11px;
}

残念ながら、これは機能しません。これはHTMLで生成されます。

<button class="ui-button ui-widget ui-state-default ui-corner-all
    ui-button-text-only smallButton" (...)>
    <span class="ui-button-text ui-c">MY TEXT</span>
</button>

このボタンのテキストは14pxサイズです。私のすべてを持っているCSSはどのように見えるべきですかsmallButtonfont-size: 11px？

htmlcssjsfprimefaces
5
Demiurg

私は自分の問題の解決策を見つけました。私が必要なのはこれだけです：

.smallButton.ui-button-text-only .ui-button-text {
    font-size: 11px;
}

したがって、ui-button-text-only .ui-button-textはsmallButtonにのみ適用されます。以前に試しましたが、.smallButtonの後にスペースがあるため、機能しませんでした。これで正常に動作しています。あなたの答えをありがとう。

3
Demiurg

あなたの問題は、すべてのCSSのロード順序に関連しています。 CSSはカスケードスタイルシートです。したがって、.smallButtonスタイルを適用する場合は、以前の一致するスタイルをオーバーライドするために、cssチェーンの最後である必要があります。

CSSの順序を確認してください（ブラウザで生成されたソースヘッダーを参照してください）

CSSを最後にしたい場合は、ページまたはテンプレート内でこれを使用できます。

<f:facet name="last">
  <h:outputStylesheet library="default" name="css/yourstyles.css" />
</f:facet>

これにより、どちらでも機能する!importantタグの使いすぎを回避できます。

[〜＃〜]編集[〜＃〜]

これは私にとってクロームでうまくいきます。 Chromeは、ui-button-text埋め込みスパンのfont-sizeが11pxであり、最初のボタンが2番目のボタン（font-sizeが14px）よりも小さいことを示しています。

<style>
.ui-button-text{
   font-size:14px;
}
.smallButton .ui-button-text {
   font-size:11px;
}
</style>

<p:commandButton id="mySmallButton" styleClass="smallButton"/>
<p:commandButton id="myButton"/>

また、生成されたhtmlボタンにはui-buttonクラスがないことに注意してください。

9
Stephane Lallemagne

PrimeFacesは、親フォームのデフォルトのルールでcssをオーバーライドします。

次のようなフォームのCSSを定義できます。

form .smallButton{
   font-size:11px;
}

または、!importantキーワードを使用できます。

.smallButton{
   font-size:11px !important;
}

関連項目：

2
unwichtich