How to Style Child Components in Vue.js Using /deep/, >>>, ::v-deep, and :deep?

>>, ::v-deep, and :deep? " />

How to Use /deep/, >>>, or ::v-deep in Vue.js

When working with component structures in Vue.js, applying style rules to elements within child components becomes necessary. Here, Vue provides several options to achieve this: /deep/, >>>, and ::v-deep.

Vue 2.0 - 2.6

Sass: Utilize ::v-deep to penetrate child component boundaries:

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

Plain CSS: Employ >>> to achieve the same effect:

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

Vue 3 (and Vue 2.7)

Unified Selector: Vue 3 introduces :deep as the unified selector, regardless of Sass usage:

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

Slot Content: Styling elements passed through slots:

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

Global Styles: Applying styles globally from scoped components:

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

Key Considerations:

• All styles must be defined within scoped
• In Vue 3, ::v-deep is deprecated in favor of :deep.
• >>> is also deprecated in Vue 3.

Example (Vue 3):

<template>
  <div class="parent">
    <child-component>
      <slot>Slotted content</slot>
    </child-component>
  </div>
</template>

<script>
export default {
  setup() {
    return {
      scopedStyle: ':deep(.child-component-class) { background-color: red; }',
    };
  },
};
</script>

<style scoped>
  :slotted(.slot-class) { color: blue; }
  {{ scopedStyle }}
</style>

By understanding these selectors and scoping principles, you can effectively target elements within child components in Vue.js.

The above is the detailed content of How to Style Child Components in Vue.js Using /deep/, >>>, ::v-deep, and :deep?. For more information, please follow other related articles on the PHP Chinese website!