What is the proper way to convert the Vue3 ::v-deep SASS syntax to utilize :deep?

Question

What is the proper way to convert the Vue3 ::v-deep SASS syntax to utilize :deep?

HTML:

<template>
 <form class="bg-white">
  <div class="source-field">
...

The original SASS code looks like this:

.form::v-deep
  .source-field
    width: 129px
    display: inline-block
    margin: 0px 2px 5px 2px

When trying to change it like this, none of the styles apply anymore:

:deep(.form)
  .source-field
    width: 129px
    display: inline-block
    margin: 0px 2px 5px 2px

Alternatively, this code also works:

::v-deep
  .source-field
    width: 129px
    display: inline-block
    margin: 0px 2px 5px 2px

However, this code does not work:

:deep()
  .source-field
    width: 129px
    display: inline-block
    margin: 0px 2px 5px 2px

css vue.js sass vuejs3

Answer 1

Answer №1

Detailed information can be found in the documentation: https://vuejs.org/api/sfc-css-features.html#scoped-css

To target child components in scoped styles, use the :deep() pseudo-class:
<style scoped>
.a :deep(.b) {
  /* ... */
}
</style>

For a well-explained answer, visit:

A potential solution for your scenario:

In your code, you have .form::v-deep .source-field, where .form is the parent component. You can rewrite it as .form >>> .source-field for better comprehension. With the new :deep() syntax, combine it with the parent selector followed by the child's name as a "parameter". (e.g. .parent :deep(.child))

To address your specific case, consider using .form :deep(.source-field). To maintain nested selectors, you can try:

.form
  :deep(.source-field)
    width: 129px
    display: inline-block
    margin: 0px 2px 5px 2px

Answer 2

Detailed information can be found in the documentation: https://vuejs.org/api/sfc-css-features.html#scoped-css

To target child components in scoped styles, use the :deep() pseudo-class:
<style scoped>
.a :deep(.b) {
  /* ... */
}
</style>

For a well-explained answer, visit:

A potential solution for your scenario:

In your code, you have .form::v-deep .source-field, where .form is the parent component. You can rewrite it as .form >>> .source-field for better comprehension. With the new :deep() syntax, combine it with the parent selector followed by the child's name as a "parameter". (e.g. .parent :deep(.child))

To address your specific case, consider using .form :deep(.source-field). To maintain nested selectors, you can try:

.form
  :deep(.source-field)
    width: 129px
    display: inline-block
    margin: 0px 2px 5px 2px

What is the proper way to convert the Vue3 ::v-deep SASS syntax to utilize :deep?

Answer №1

Similar questions

Text remains constant until the mouse hovers over the image

I'm encountering an issue with the "z-index: -1" property in React

Discover the div element while scrolling with VUE.js

Troubleshooting an Issue with CSS Sliding Doors

During the rendering process, the property "projects" was attempted to be accessed, however, it has not been defined within

Unable to fix position: sticky issue following Angular 15 update

The Vue app's Axios request deployed on Amazon S3 fetches the home page of the website

I need a layout similar to the navbar on http://thecoloradan.com/ but I am not asking for instructions on how to do it

Establishing a primary color for all text in Vuetify

The ion-content scrolling directive is failing to show any displayed information

Eliminating elements that adjust according to different screen sizes

How can the border of the select element be removed when it is active in select2

The animation of the splash screen in Angular is quite jarring and lacks fluidity

The CSS property object-fit: cover is unable to properly display JPEG images with EXIF orientation greater than 1

Be cautious of potential warnings and errors that may arise while utilizing casl and vue together

What is the best way to make my button sticky across different screen sizes on my webpage?

How to create a full-page background image using Bootstrap?

Troubleshooting the issue of JavaScript not executing on elements with a specific CSS class

Basic jQuery Slideshow Counter

Removing the rows that do not contain a table - nested div elements within other div elements