请教一个 vue 全局 css 问题

[imherer]

首先我用了 vant 这个框架

在 A 页面里有很多图片，图片显示用的是 vant 里的图片组件（ van-image ），现在需要给图片加上圆角，于是我就用了全局的 css （ scoped 不生效）

<style>
.van-image__img {
  border-radius: 5px;
}
</style>

从 A 页面跳转到 B 页面后，B 页面也有很多图片，同样也是用的 van-image 显示的，现在需求是 B 页面图片不能有圆角，于是我又在 B 页面里把圆角去掉：

<style>
.van-image__img {
  border-radius: 0;
}
</style>

现在的问题是当从 B 页面返回到 A 页面的时候，A 页面的图片圆角也没了。各位大佬应该如何解决呢？

现在临时解决方案是 A\B 两页面一个页面用原始的 img 一个页面用 van-image

[ayase252]

......二次封装一下组件

[vex2]

写两个全局 class 加到 component 不同页面的指令里

[cyrbuzz]

仅仅解决了这个问题的方法...
给 B 里的加 scoped...

```
<style scoped>
.van-image__img {
border-radius: 0;
}
</style>
```

[imherer]

@ayase252 好的，我去看看如何封装

我一后端……硬生生被拉来写前端...

[just1]

多几层选择器咯，比如弄一个 b 独有的父 class

[ochatokori]

给 a 页面加个类名呗…

[imherer]

@cyrbuzz 试过了
.van-image__img 是 vant 框架里 css，在 scoped 里不生效

[imherer]

@ochatokori
@vex2
我最开始就想这样解决，但是它这个 van-image 组件解析之后是一个 div 里面套了一个 img，加了 clas 是直接加到了 div 上，是过用 css 选择器给子元素添加 css 也不生效

[karott7]

出现层主这样的问题是访问 A 页面就会加载 A 页面的 css 文件，再访问 B 页面就会加载 B 页面的 css 文件，有相同的属性就会覆盖掉。
加 scoped 是一个办法，但是如果在顶层定义了一个类，那么就不能用。
我是在每个页面的根元素加一个类，比如.a-wrapper 和.b-wrapper，然后 a 文件下的 css 类都写在对应的 wrapper 下面，这样就不会出现层主那样的问题了

[Mozshaw]

/deep/ selector

[zhuweiyou]

全局的 CSS 文件里写个
body.hello .van-image__img {
border-radius: 5px;
}

然后在 路由变化的钩子里 判断 是 A 页面 body.addClass("hello"),其他页面 body.removeClass("hello")

[jingcoco]

/deep/ 了解一下。我之前遇到过类似的 ，scoped 导致无法穿透的，可以用这个做前缀

[yeyeboy]

scoped 穿透里面的组件，我一般是在图片外面加一层容器，然后像下面这样
.van ::v-deep .van-image__img {
border-radius: 0;
}
= ，= 你要是没别的办法可以试试这个（不保证能用哈）

[choujiaojiao]

/deep/

[xuxuxu123]

/deep/ 是对的
目前在用

[Parabolazz]

/deep/ 可以在 scoped 下影响到内部的选择器

[zhw2590582]

给不同页面分配不同的类名就可以区分开啦

[Elephant696]

css 环境可以用 >>> 穿透符，less 环境可以用 /deep/ 穿透符，dart-sass 环境可以用 ::v-deep 穿透符，node-sass 环境忘了，好像也是 /deep/ 穿透符