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

user_9700096 0
Viewed 209

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;
          }
        }
      }
    }
vuejs3 vue.js css
1 Answers

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

user_62771510
Related