how to use :deep(.className) in vue 2

Ascolon 0
Viewed 36

i have working scss styles

.alert {
  ::v-deep .v-alert__border {
    top: 8px;
    bottom: 8px;
    border-radius: 200px;
  }
  &:not(&--rtl) {
    // styles
  }
}

I want to redo these styles like this.

 .alert {
    :deep(.v-alert__border) {
      top: 8px;
      bottom: 8px;
      border-radius: 200px;
    }
    &:not(&--rtl) {
      // styles
    } 
  }

The problem is that it doesn't work. I use

"vue": "^2.6.11",

Found information that this functionality is not supported in "vue": "^2.6.11",.

Is it really not supported or am I doing something wrong?

vuejs2 vuejs3 sass
2 Answers

Looking at the discussion found here: https://github.com/vuejs/core/issues/4745

Every example starts with :deep and never nested?


  :deep(.alert.v-alert__border) {
    top: 8px;
    bottom: 8px;
    border-radius: 200px;
  }



  :deep(.alert) {
    .v-alert__border {
      top: 8px;
      bottom: 8px;
      border-radius: 200px;
    }
  }

Perhaps one of those two works?

userROG50

I tested these codes and they works for me. I am using vue version 2.6.11 and vue cli version 4.5 and sass version 1.26.5:

parent component:

<template>
<section>
  <div class="myParent">
    <ChildAlert></ChildAlert>
  </div>

  <ChildAlert></ChildAlert>
</section>
</template>

<script>
import ChildAlert from "./ChildAlert";
export default {
  name: "AlertCompo",
  components: {
    ChildAlert
  }
}
</script>

<style scoped lang="scss">

.myParent {
  background-color: #000;
  :deep(.myTitle) {
    color: red;
  }
}

</style>

child component:

<template>
<section>
  <h1 class="myTitle">this is Child component</h1>
</section>
</template>

<script>
export default {
  name: "ChildAlert"
}
</script>

<style scoped>

</style>

hamid-davodi0
Related