vue中使用框架中的组件更改样式不生效

570 阅读1分钟
原因:
1.添加了scopedscoped 仅限作用在当前组件的样式, 避免全局样式污染, 不加scoped默认作用到全局的样式
2.在单文件组件中修改组件库中的样式默认是不会向下穿透的
解决

方式1: scoped属性移除

方式2: 开启深度选择器

1.scss/sass中开启深度选择器 ::v-deep {在这里面处理要覆盖的样式}

2.less /deep/

3.css >>>

注意:

   1.深度选择器添加的时候前提,如果要设置样式的组件,结构会直接渲染在页面中,不需要深度选择器 
   
   2.组件动态创建的结构标签,设置动态设置的结果与标签的时候,才添加深度选择器
   
   3.导入的样式要在自己写的样式之前,例如:      
   ```// 导入注册组件的vant-ui.js文件
      import '@/utils/vant-ui'
     // 导入全局的样式文件
     import '@/styles/index.scss'
   ```