vue3 使用第三方组件样式无法修改成功的解决方案_html-js-css

问题描述：在Vue组件中，若在style标签上添加scoped属性，则表明style标签中的样式只作用于此Vue组件，这样可以避免样式的全局污染。开发过程中，修改第三方组件样式时会碰到scoped中进行样式穿透后样式不生效的问题。

无效写法：

 <div id="mydialog">
	<div v-if="state.showConfirm">
	   <nut-dialog :close-on-click-overlay="true"
	               content="您修改后的报价还未保存，是否保存后退出？"
	               v-model:visible="state.showConfirm">
	     <template #footer>
	       <div class="exit-dialog-footer">
	         <div class="btn cancel"
	              @click="goBack">取消</div>
	         <div class="btn confirm"
	              @click="saveAndBack">保存后退出</div>
	       </div>
	     </template>
	   </nut-dialog>
	 </div>
 </div>
<style lang="scss" scoped>
#mydialog {
  :deep(.nut-dialog) {
    width: 305px;
    height: 153px;
    background: #ffffff;
    border-radius: 8px;
    padding: 0;
  }
  :deep(.nut-dialog__content) {
    margin: 0;
    padding: 32px 30px;
    width: 257px;
    height: 44px;
    line-height: 24px;
    font-size: 16px;
    color: #333333;
    letter-spacing: 0;
    text-align: center;
    font-weight: 400;
  }
}
</style>

原因分析：

通过查看style发现样式已经进行穿透，但是样式并没有改变

查看dom如下：

原因找到了，只要我们让nut-dialog渲染到你指定的容器下就可以了

解决方案：利用vue3的传送门Teleport来实现

使用vue3中的teleport组件或者nut-dialog组件上的teleport属性都可以

 <div id="mydialog">
 <!-- 多包一层否则报错 利用teleport，nut-dialog组件上以提供teleport属性，
 其他如果没有这个属性的组件可以使用vue3中提供的teleport组件 -->
   <div v-if="state.showConfirm">
     <nut-dialog :close-on-click-overlay="true"
                 teleport="#mydialog"
                 content="您修改后的报价还未保存，是否保存后退出？"
                 v-model:visible="state.showConfirm">
       <template #footer>
         <div class="exit-dialog-footer">
           <div class="btn cancel"
                @click="goBack">取消</div>
           <div class="btn confirm"
                @click="saveAndBack">保存后退出</div>
         </div>
       </template>
     </nut-dialog>
   </div>
 </div>