コンポーネント内の CSS

CSS をコンポーネントのバンドルに追加するには、開発者コンソールのサイドバーで [STYLE] ボタンをクリックします。

外部 CSS リソースの場合は、「アプリケーションのスタイル設定」を参照してください。

コンポーネントのすべての最上位要素には、特殊な THIS CSS クラスが追加されています。これにより、事実上 CSS に名前空間設定が追加されます。これは、コンポーネントの CSS が別のコンポーネントのスタイル設定を上書きすることを回避するのに役立ちます。CSS ファイルがこの規則に従わない場合、フレームワークはエラーを発生させます。

サンプルの helloHTML.cmp コンポーネントを見てみましょう。CSS は helloHTML.css 内にあります。

コンポーネントのソース

1<aura:component>
2  <div class="white">
3    Hello, HTML!
4  </div>
5  
6  <h2>Check out the style in this list.</h2>
7  
8  <ul>
9    <li class="red">I'm red.</li>
10    <li class="blue">I'm blue.</li>
11    <li class="green">I'm green.</li>
12  </ul>
13</aura:component>

CSS ソース

1.THIS {
2    background-color: grey;
3}
4
5.THIS.white {
6    background-color: white;
7}
8
9.THIS .red {
10    background-color: red;
11}
12
13.THIS .blue {
14    background-color: blue;
15}
16
17.THIS .green {
18    background-color: green;
19}

出力

最上位要素の h2 と ul は THIS クラスと一致し、灰色の背景で表示されます。最上位要素は HTML body タグでラップされるタグで、他のタグでラップされることはありません。この例では、li タグは ul タグにネストされているため、最上位要素ではありません。

<div class="white"> 要素は .THIS.white セレクタと一致し、白の背景で表示されます。このルールは最上位要素用であるため、セレクタにはスペースがありません。

<li class="red"> 要素は .THIS .red セレクタと一致し、赤の背景で表示されます。これは下位のセレクタであり、<li> は最上位要素ではないため、スペースが含まれます。