ミニプログラムカスタムコンポーネントの非効率的なグローバルスタイルの解決策

ネイティブフレームワークを使用してミニプログラムを開発しているときに、app.wxss で定義されたグローバルスタイルがカスタムコンポーネントでは有効にならないという問題が発生しました。その後、これはミニプログラムコンポーネントスタイルの分離の構成によって発生したことが判明しました。

長すぎて読めない

コンポーネントの json ファイルに次の構成を追加すると、グローバルスタイルが有効になります。

//コンポーネント.json
「styleIsolation」：「共有を適用」

js ファイルで設定したい場合、またはバージョン番号が 2.10.1 未満の場合は、同じ効果で js ファイルに記述することもできます。

//コンポーネント.js
成分（{
  オプション:
    スタイル分離: 'apply-shared'
  }
})

バージョン番号が 2.6.5 未満の場合は、styleIsolation の代わりに次の構成を使用できます: 'apply-shared'

//コンポーネント.js
成分（{
  オプション:
    グローバルクラスを追加: true
  }
})

コンポーネントスタイルの分離

コンポーネントの styleIsolation には、次の 3 つのオプション値があります。

分離: デフォルト値。コンポーネントの内側と外側のスタイルは互いに影響しません。
apply-shared: 外部スタイル（親ページとグローバルスタイルを含む）を受け取りますが、コンポーネント内のスタイルは外部スタイルに影響を与えません。
shared: 外部スタイルを受け取り、コンポーネント内のスタイルがページに共有されます

デモテスト

より直感的な体験を実現するために、デモを作成し、簡単な実験を実施しました。

コンポーネント comp を定義し、ページインデックスに導入します。

<!-- comp.wxml -->
<view class="test1 testbox">comp1</view>
<view class="test2 testbox">comp2</view>
<view class="test3 testbox">comp3</view>

<!-- index.wxml -->
<comp />
<view class="test3 testbox">インデックス3</view>

次に、test1、test2、test3 の色を、それぞれグローバル、ページ、コンポーネントの世界で赤、緑、青として定義します (testbox のスタイルは省略します)。

/* アプリ.wxss */
.テスト1 {
  背景色: ライトピンク;
}

/* コンポーネント/index.wxss */
.テスト2 {
  背景色: 薄緑;
}

/* コンポーネント/comp.wxss */
.test3 {
  背景色: 水色;
}

次に、コンポーネントの styleIsolation プロパティに異なる値が設定され、結果は次のようになります。

ご覧のとおり、デフォルトの分離モードでは、親ページもグローバルスタイルも有効ではありません。apply-shared モードでは、ページスタイルとグローバルスタイルをコンポーネントに適用できます。共有モードでは、コンポーネントスタイルが親ページに適用されます。

優先度

さらに、テストの結果、同じセレクターの場合、スタイルの優先順位はコンポーネントスタイル > ページスタイル > グローバルスタイルとなり、これは基本的にコンポーネントに対して直感的です。ただし、コンポーネントが共有を適用すると、そのコンポーネント内のスタイルによってページ内のスタイルも上書きされるため、少し奇妙になります。

まとめると、特別な必要がない限り、共有モードを慎重に使用し、セレクタの競合と相互上書きを最小限に抑えて、不必要な超自然的な事故を回避することをお勧めします。共有が必要なスタイルについては、状況に応じてグローバルレベルに抽出したり、CSS ファイルをインポートして実装したりできます。

ページの分離構成

ミニプログラムのページは実際にはコンポーネントであるため、styleIsolation プロパティも設定できます。カスタムコンポーネントとは異なり、ページの既定値は share であるため、デフォルトでグローバルスタイルをページに適用できます。

さらに、3 つの追加属性値がページに追加されます。ドキュメントにはそれぞれの説明があるものの、実際に試してみて非常に混乱し、それぞれの正確な機能や違いがまったくわかりませんでした。ページをisolated / page-isolatedに設定した後、ページ独自のスタイルが無効になるという謎のバグもありました。実装に問題があるのかもしれません。そのため、ページの styleIsolation 設定を安易に変更しないことをお勧めします。ご興味がおありの場合は、記事の最後にあるリンクをクリックして、ご自身で勉強し、実験してみてください。

比較的確実な選択肢は 1 つだけです。page-shared を設定すると、ページ (およびその中のコンポーネント) は app.wxss のグローバルスタイルをブロックし、他の側面への影響は小さくなるはずです。必要に応じて試すことができます。

参考文献

WeChat公式ドキュメント · ミニプログラム

これで、ミニプログラムのカスタムコンポーネントでグローバルスタイルが反映されない問題の解決方法についての記事は終了です。ミニプログラムのコンポーネントでグローバルスタイルが反映されない問題の詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: