CODEWITHSUNDEEP
cssvue.jsvuejs3
Oğulcan Karayel
Oğulcan Karayel

Reputation: 425

How to use ::v-deep selector for nested classes in vue

I know the ::v-deep selector has been changed in vue 3. I understood how to use it with one class but I can't find any sources about nested classnames. For example:

vue2

::v-deep {
    .table-footer-container {
      display: none ;
    }
  }

vue 3

:deep(.table-footer-container) {
    display: none 
  }

But how can I transform this code block to vue 3 version ?

::v-deep {
      .v-select {
        .vs__dropdown-toggle {
          background: #fff;
          border-color: #ddd;
        }
        &.vs--open {
          .vs__dropdown-toggle {
            border-color: #ff6000;
          }
        }
      }
    }

Upvotes: 8

Views: 5873

Answers (2)

tomson
tomson

Reputation: 171

If you want to keep the code changes simple, you can also undermine the obligation to use a child selector very easily by allowing the changes to all child elements through the asterisk operator:

:deep(*) {
  .v-select {
    .vs__dropdown-toggle {
      background: #fff;
      border-color: #ddd;
    }
    &.vs--open {
      .vs__dropdown-toggle {
        border-color: #ff6000;
      }
    }
  }
}

This solution makes more sense in many cases, because the old structure of your (BEM) notation is not lost this way. For example, the following code...

.paragraph {
  &__headline {
    margin-bottom: 2rem;
  }
  &__text {
    margin-bottom: 20px;
  }
  ::v-deep &__link {
    text-decoration-color: red;
  }
}

... can be converted to this...

.paragraph {
  &__headline {
    margin-bottom: 2rem;
  }
  &__text {
    margin-bottom: 20px;
  }
  :deep(*) &__link{
    text-decoration-color: red;
  }
}

...without changing any structure.

Upvotes: 4

tony19
tony19

Reputation: 138216

Wrap both nested selectors in :deep():


<style scoped lang="scss">
.v-select {
  color: green;
     👇
  &:deep(.vs__dropdown-toggle) {
    background: #fff;
    border-color: #ddd;
    color: red;
  }
     👇
  &:deep(.vs--open) {
    .vs__dropdown-toggle {
      border-color: #ff6000;
      color: blue;
    }
  }
}
</style>

demo

Upvotes: 9

Related Questions