Help us understand the problem. What is going on with this article?

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

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

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

サンプル

ion-card

https://ionicframework.jp/docs/api/card/

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

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

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

ion-button

https://ionicframework.jp/docs/api/button

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

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

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

ion-popover

https://ionicframework.jp/docs/api/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標準の技術の中でやっているので スタイリングを当てることが不可能ということはありません。

それでは、また。

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away