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

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;
          }
        }
      }
    }

CodePudding user response：

Wrap both nested selectors in :deep():


<style scoped lang="scss">
.v-select {
  color: green;