技術共有

[WeChat ミニ プログラムのナレッジ ポイント] カスタム コンポーネント - 拡張機能 - 外部スタイル クラス

2024-07-12

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

コンポーネントを使用する場合、コンポーネントのユーザーは CSS クラス名をコンポーネントに渡し、渡されたクラス名を通じてコン​​ポーネントのスタイルを変更できます。

外部スタイル クラスを使用してコンポーネントのスタイルを変更する必要がある場合は、externalClassess を使用して、コンポーネントでいくつかの外部スタイル クラスを定義する必要があります。

具体的な使い方は以下の通りです。

(1)Componentsファイルにcustom06コンポーネントを作成します

(2) app.jsonの設定項目「usinfComponents」にcustom06コンポーネントを登録します

 

(3)custom06.jsにexternalClassessを追加し、外部スタイルクラスを定義します。

 

(4) このスタイルクラスをcustom06.wxmlで使用します

(5) cart.wxmlページのスタイルクラスを介してクラス名をバインドします。

(7) cart.scssのクラス名でスタイルを設定します。

(8) 表示形式は以下のとおりです。

 

(9) 注:

注: 同じノード上に外部スタイル クラスと通常スタイル クラスがある場合は、次のようになります。

2 つのクラスの優先順位は未定義です

 

 

提案: 外部スタイル クラスを使用する場合、スタイルは ! important を通じて重みを追加する必要があります。