通过上一节我们了解到为什么会使用到deep样式穿透，怎么样使用deep样式穿透，deep样式穿透能解决我们什么问题。
实例
<template>
<el-dialog v-model="is" title="Tips" width="30%">
// ...
</el-dialog>
</template>
<script lang="ts" setup>
import { ref } from "vue";
const is = ref(true);
</script>
<style lang="scss" scoped>
::v-deep(.el-dialog__body) {
padding: 0px !important;
}
</style>
这是一个非常常见的自定义element-plus的dialog样式例子，可以看到外面通过deep穿透想修改el-dialog组件的 .el-dialog__body样式，可是它并没有生效。
原因
当使用::v-deep选择器时，它可以穿透组件边界，允许我们修改组件内部的样式，包括子组件和子组件的子组件。然而，::v-deep选择器在某些情况下可能无法直接修改根目录组件的样式。
这是因为在Vue组件中，样式默认是被封装在组件的作用域中的，不会影响到组件外部的样式。这种封装性有助于避免样式冲突和提高组件的可重用性。
当我们使用 ::v-deep选择器时，它会向上穿透组件边界，寻找匹配的样式规则。但是，根目录组件的样式可能被外部的样式作用域所限制，导致::v-deep选择器无法直接修改根目录组件的样式。
暂时解决方案
<template>
<div>
<el-dialog v-model="is" title="Tips" width="30%">
// ...
</el-dialog>
</div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
const is = ref(true);
</script>
<style lang="scss" scoped>
::v-deep(.el-dialog__body) {
padding: 0px !important;
}
</style>
- 使用全局样式：在全局样式文件中直接修改根目录组件的样式。这样可以绕过组件作用域的限制，但需要注意全局样式可能会对其他组件产生影响，因此请谨慎使用。
- 使用自定义类名：给根目录组件添加一个自定义类名，并在样式中使用该类名进行修改。这样可以通过类选择器来修改根目录组件的样式，而不受组件作用域的限制。需要注意的是，为了保持代码的可读性和可维护性，我们应该尽量遵循组件封装的原则，避免直接修改根目录组件的样式。如果确实需要修改根目录组件的样式，建议使用上述方法，并在注释中说明原因和影响范围。
- 或者在根目录元素下新增一层div，当然此方案肯定不是很优雅，如果有其他解决方案请赐教。
