解决vue3中设置的v-html的代码样式不生效的问题

最近在做一个需求，遇到这样一个问题，接口返回的一段html字符串，在list.vue这个组件中使用v-html渲染到页面的时候，发现在list.vue中设置的对于v-html内容的样式没有生效，这是什么情况？

经过查询发现：

在单文件组件里，scoped 的样式不会应用在 v-html 内部，因为那部分 HTML 没有被Vue 的模板编译器处理。如果你希望针对v-html 的内容设置带作用域的 CSS，你可以替换为 CSS Modules 或用一个额外的全局

在单文件组件里，scoped 的样式不会应用在 v-html 内部，因为那部分 HTML 没有被Vue 的模板编译器处理。
这句话非常清楚地表明了没有生效的原因。
那我们怎么设置让它生效呢？
直接使用:deep()
对于针对v-html的样式的，我们用:deep()处理一下；

代码如下：

:deep(.all-tables) {
    
    
        table {
    
    
            background-color: #fff;
            td {
    
    
                font-size: 12px;
                color: #666;
            }
        }
 }