/deep/、>>>、::v-deep、および :deep を使用して Vue.js で子コンポーネントをスタイル設定する方法

>>、::v-deep、および:deep? " />

Vue.js で /deep/、>>>、または ::v-deep を使用する方法

コンポーネント構造を操作する場合Vue.js では、子コンポーネント内の要素にスタイル ルールを適用する必要があります。ここで、Vue には、これを実現するためのいくつかのオプションが用意されています。 >>>、および ::v-deep.

Vue 2.0 - 2.6

Sass: ::v-deep を利用する子コンポーネントを貫通する境界:

::v-deep .child-class {
    background-color: #000;
}

プレーン CSS: 同じ効果を実現するには >>> を使用します:

>>> .child-class {
    background-color: #000;
}

Vue 3 (および Vue) 2.7)

統合セレクター: Vue 3 では、Sass の使用法に関係なく、統合セレクターとして :deep が導入されています:

:deep(.child-class) {
    background-color: #000;
}

スロット コンテンツ: 渡されるスタイル要素スロット:

:slotted(.slot-class) {
    background-color: #000;
}

グローバル スタイル: スコープされたコンポーネントからグローバルにスタイルを適用する:

:global(.my-class) {
    background-color: #000;
}

重要な考慮事項:

• すべてのスタイルはスコープ付きの