uniapp カスタム コンポーネントまたは uview およびその他の UI コンポーネントへのクラス スタイルの追加またはスタイルの変更が、WeChat アプレットで有効にならない

理由:

まず第一に、それがカスタム コンポーネントであろうと UI コンポーネントであろうと、本質的な理由は WeChat アプレットのデフォルトのコンポーネント分離戦略です。
WeChat Mini プログラム コンポーネント分離ドキュメント リファレンス

次の解決策は、さまざまな状況に基づいています。

1. 元のクラスのスタイルを変更する

たとえば、uview radio ラジオ コンポーネントの元のクラス (.u-radio) では、変更されたスタイルは有効になりません。

.u-radio {
		margin-right: 25px;
	}

解決策:
::v-deep を追加します

::v-deep .u-radio {
		margin-right: 25px;
	}

2.クラスアップ

たとえば、uview radio ラジオ コンポーネントに新しいクラス (myClass) を追加しましたが、有効になりませんでした

.myClass {
		margin-right: 25px;
	}

解決策:
スタイルを変更するコンポーネントで、データと同じレベルで WeChat アプレット構成を追加します。

options: {
			styleIsolation: 'shared', // 解除样式隔离
		}

ここに画像の説明を挿入

3. インライン スタイル (通常どおり有効)

  • コンポーネントは属性を介してスタイルを受け入れます (通常)
  • ネイティブスタイル属性で直接変更する場合(ノーマル)

おすすめ

転載: blog.csdn.net/qq_39879542/article/details/127410116