请教一个 vue 全局 css 问题

資深大佬 : imherer 20

首先我用了 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 页面的图片圆角也没了。各位大佬应该如何解决呢？

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

大佬有話說 (17)

資深大佬 : 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

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