vue3+elemeent-plus, el-tooltip style modification does not take effect

In the following code, no matter how you modify the style of el-tooltip, it will not take effect.

<el-tooltip placement="top" effect="dark" :content="content">
    <div>{
   
   { content}}</div>
</el-tooltip>

:deep(.el-popper),
:deep(.el-popper[data-popper-placement^="top"] .el-popper__arrow::before) {
  background-color: $daping-background-color !important;
}
:deep(.el-popper) {
  width: 31.875rem !important;
}

Here’s why:

        In element-plus, the dom structure of tl-tooltip is appended to the body by default , so the style modification under the app structure does not take effect; the specific solution is as follows:

method one:

<el-tooltip :teleported="false" placement="top" effect="dark" :content="content">
    <div>{
   
   { content}}</div>
</el-tooltip>

<style lang="scss" scoped>
:deep(.el-popper),
:deep(.el-popper[data-popper-placement^="top"] .el-popper__arrow::before) {
  background-color: #fff !important;
}
:deep(.el-popper) {
  width: 31.875rem !important;
}
</style>

Set the "teleported" attribute to false , so that it will not be appended to append-tothe position by default, and the modified style will take effect.

Method Two:

        It is appended to the body by default, but at this time you can use the popper-class attribute to add a class name to el-tooltip [In order not to affect other tooltip styles, the class name should be unique] , and then write another style structure, Among them, be sure not to add the scoped attribute . Finally, you can modify the style of el-tooltip at will. The specific code is as follows:

<el-tooltip placement="top" effect="dark" :content="content" popper-class="my-tooltip">
    <div>{
   
   { content}}</div>
</el-tooltip>


// 此处一定不要加scoped，另外，为了不影响其他地方的tooltip样式，此处的class命名一定要唯一
<style lang="scss">
.my-tooltip {
    background-color:#fff !important;
    width: 31.875rem !important;
    z-index: 10000 !important;
}
</style>