解决vue加scoped后就无法修改vant的UI组件的样式问题

解决解决vue加加scoped后就无法修改后就无法修改vant的的UI组件的样式问题组件的样式问题

主要介绍了解决vue加scoped后就无法修改vant的UI组件的样式问题，具有很好的参考价值，希望对大家有所帮

助。一起跟随小编过来看看吧

有时候UI组件提供的默认的样式不能满足项目的需要，就需要我们对它的样式进行修改，但是发现加了scoped后修改的样式

不起作用。

解决方法：解决方法：

使用深度选择器，将scoped样式中的选择器“深入”，即影响子组件

<style scoped>

使用Less或Sass等预处理器的写法如下：

.van-radio {

/deep/ .van-radio__label {

width: 500px;

}

}

补充知识：补充知识：vue+vant移动端遇到的那些问题移动端遇到的那些问题

1、项目引用了lib-flexible 跟px2rem-loader做适配，然后真机测试的时候发现字体在手机上显示的很小。【推荐去看下

px2rem-loader的文档】

原因+解决：百度说应该在后面加上/*px*/（font-size:14px;/*px*/），这里这么设置时，字体的大小要为两倍，如你想让字体显

原因+解决：scoped的作用是让样式应用于当前页，不影响其他的页面的样式，而当你用了vant组件想调整它的组件样式时，

这个组件是子组件，因为你用了scoped，所以影响不到它，这个时候你应该使用deep——深入选择器，下图就是用法，如果

你用了less或者sass这些，写法请自行百度！！！(本人略怂，不敢在项目赶得时候用太多不熟的东西)，当然啦，你也可以任

性的在公共css样式文件里写，我说的就跟你没半毛钱关系了，谨防被打死就好！

4、使用了vant的搜索组件，然后在ios上测试时发现，input框被放大了

原因+解决：在index.html的头部加上"maximum-scale=1.0, user-scalable=0"，禁止它放大

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />