（中級者向け）Ionic 4でのCSSカスタム変数の使い方

Ionic 4は、Web Componentsが導入され、一部のスタイリングはShadowDOMによってカプセル化されています。そのため、グローバルとは異なる方法で、スタイリングを当てる必要があります。ドキュメントだけでは分かりづらいという声があったので、いくつかのサンプルをまとめておきます。

テーマの当て方自体がわからない方は、先に CSS変数｜Ionic Framework 日本語ドキュメンテーション をご覧ください。

サンプル

ion-card

ShadowDOMになっていないため、CSSカスタム変数も使えるけど、普通にCSSでも上書きできる。

// ○ スタイルが当たる
ion-card {
  background: #000000;
  color: #ffffff;
}

// ○ スタイルが当たる
ion-card {
  --background: #000000;
  --color: #ffffff;
}

ion-button

ShadowDOMが true になっているため、ion-buttonの下位DOMのスタイリングを変更する時はCSSカスタム変数を使う必要がある。

// ☓ スタイルは当たらない
ion-button button {
  background: red;
}

// ○ スタイルは当たる （ion-button>buttonに反映）
ion-button {
  --background: red;
}

ion-popover

ShadowDOMになっていないため、普通にCSSで上書きできるけど、DOMツリー内でのCSS変数の受け渡しがあるからCSSカスタム変数を使ったほうが楽。
上と下のSCSSは同じ結果。

// ○ スタイルは当たる
ion-popover {
  .popover-content {
    height: 200px;
    box-shadow: 10px 10px 10px 10px rgba(0,0,0,0.4);
  }
}

// ○ スタイルは当たる
ion-popover {
  --height: 200px;
  --box-shadow: 10px 10px 10px 10px rgba(0,0,0,0.4);
}

おまけ

CSSカスタム変数を、DOMに直接記述することもできます。

<ion-button 
  style="--border-width: 10px; --border-style: solid; --border-color: green">
    Hello World
</ion-button>

どうやって実装しているか

ソースコードやドキュメントをみれば一目瞭然なのですが、毎回実装の度にそれをするのも手間ですし、すべて記憶するには難しいので以下の手順でスタイリングを当てています。

1. とりあえずScopedCSSを意識せずに直接スタイルをあててみる
2. うまくいかなかったら、動いていないCSSの接頭に -- をつけて、CSSカスタム変数にあるかを確認してみる
3. それでもだめならドキュメント読む
4. 仕方ないのでソースコード読む

最初のほうは --background-color は存在していなくて --background だったとかでちょいちょいドキュメントの確認が必要になりますが、慣れてきたら何となくで書けるようになります。
Ionicは特別なことはしておらず、Web標準の技術の中でやっているので スタイリングを当てることが不可能ということはありません。

それでは、また。