vue中使用v-html渲染html增加样式，＞＞＞样式不生效问题

快来打我* 2023-10-04 19:08 60阅读 0赞

要想渲染富文本，只需要v-html绑定html文本即可：

![793a1a975a9a40eea0cd4f46bc2854b3.png][]

但是会发现里面的img图片会溢出盒子：

![43b00d3b65814361a1ac4a2bb76b1ee3.png][]

经过百度发现，是没有加上样式，这个原因很简单，HTML样式问题；知道原因，那么修改样式啊；起初是直接在 style 里面写相应的样式，卵用没有； 网上搜索了一下，发现有老哥也是遇到了这个问题，同时结合官方说法，说是使用 scoped后，父组件的样式将不会渗透到子组件中。从而造成这个问题，但是不使用scoped，又会造成css的污染；不过vue的深度作用选择器来了，如果你希望 scoped样式中的一个选择器能够作用得“更深”，例如影响子组件，你可以使用 >>>操作符，可以解决这一问题；

要给v-html增加样式的方法:

.body >>> img {
      width: 100%;
      object-fit: fill;
    }

但是还没有出现效果，这是因为有些像 `lang="scss"`之类的预处理器无法正确解析，`>>>`会不起作用，这种情况下你可以使用 `/deep/`操作符取而代之——这是一个 `>>>`的别名，同样可以正常工作。

.body ::v-deep img {
      width: 100%;
      object-fit: fill;
    }

然后你会发现有效果了：

![c92365bfc28b4c5895ccd53ec73ff62e.png][]

[793a1a975a9a40eea0cd4f46bc2854b3.png]: https://img-blog.csdnimg.cn/793a1a975a9a40eea0cd4f46bc2854b3.png
[43b00d3b65814361a1ac4a2bb76b1ee3.png]: https://img-blog.csdnimg.cn/43b00d3b65814361a1ac4a2bb76b1ee3.png
[c92365bfc28b4c5895ccd53ec73ff62e.png]: https://img-blog.csdnimg.cn/c92365bfc28b4c5895ccd53ec73ff62e.png