vue中修改子组件(或第三方组件库)样式

一、问题叙述

　　项目里需要新添加一个表单页面，里面就只是几个select,这个几个select是原本封装好的组件，有自己原本的样式，而这次的原型图却没有和之前的样式统一起来，需要微调一下，这里就涉及到父组件修改子组件的样式。不想混用本地和全局样式，所以选择了>>>，但是并不起作用，就换成/deep/，其实到这里我也没有继续深入这个知识点，因为在浏览器里预览后已经实现了原型图的样式，直到打包在手机上测试，发现问题，在手机上浏览并没有将样式修改过来。如下图：

 

问题：①为什么使用>>>不起作用？②为什么我使用了/deep/却没有成功的在手机上将样式修改过来？

二、相关知识点

　　㈠关于vue中使用scoped属性

在vue组件中，在style标签中添加scoped属性，这样在这里定义的css只作用于当前组件中的元素，可使组件之间的样式不会相互污染，使样式私有化。比如在父组件内使用子组件，父组件的样式不会渗透到子组件中。

　　Ⅰ、在加上scoped后，会为DOM节点自动添加一个唯一的属性（data-v-f3f3eg9后面这串数字像是独一无二的hash值），以保证其唯一性。同时在相应的css选择器末尾，也加上了当前组件的data-v-f3f3eg9属性，来使其私有化。

如Vue Loader中所给出的代码示例：

<template>
  <div class="example">hi</div>
</template>

<style scoped>
.example {
  color: red;
}
</style>

转化后：

<template>
  <div class="example" data-v-f3f3eg9>hi</div>
</template>

<style>
.example[data-v-f3f3eg9] {
  color: red;
}
</style>

　　㈡关于深度作用选择器：/deep/（>>>）

　　使用了scoped后，尽管实现组件样式的私有化，但在我们实际的项目中，在很多地方使用重复的子组件或其他的样式库时，在个别地方需要微调样式，这个时候不能直接改子组件样式，而且在父组件里的样式又不能渗透到子组件去。这个时候文档中有一句话：

不过一个子组件的根节点会同时受其父组件的 scoped CSS 和子组件的 scoped CSS 的影响。这样设计是为了让父组件可以从布局的角度出发，调整其子组件根元素的样式。

　　所以还是有办法解决刚才那个问题的，当我们希望 scoped 样式中的一个选择器能够作用得“更深”，例如影响子组件，你可以使用 >>> 操作符，编译后会在相应的选择器后面增加独有的属性；如下：

<style scoped>
.a >>> .b { /* ... */ }
</style>

上述代码将会编译成：

.a[data-v-f3f3eg9] .b { /* ... */ }

　　在这里需要注意的是，有些像 Sass 、scss之类的预处理器无法正确解析 >>>。这种情况下我们可以使用 /deep/ 或 ::v-deep 操作符来取代>>>，这是两个都是 >>> 的别名，同样可以正常工作。如下：

<style lang='scss' scoped>
.a {
    /deep/ .b{
                /* ... */
    }
}
</style>

三、问题解决

　　①为什么使用>>>不起作用？

　　因为这个项目使用的scss，所以无法正常解析>>>，所以在父组件没有渗透下去。

.pop-content {
   .input-wrapper >>>  .form-item {
    .form-label {
     /*...*/
  }

　　在浏览器查看转换的结果发现，还是原本组件的样式，我新定义的并没有出现。如下图：

　　②为什么我使用了/deep/却没有成功的在手机上将样式修改过来？

　　因为引用的这个子组件里还包裹了一层子组件，我使用了两个/deep/，不理解/deep/的实现原理，自以为每一个组件都要渗透一次。

/*错误代码：写了两次/deep */
.pop-content {
  /deep/ .input-wrapper /deep/  .form-item {
 　　　　 ...
  } 
 }

转换后在浏览器看到的代码，发现第二个是无法转换的。

.pop-content[data-v-b93cf8e0] .input-wrapper /deep/ .form-item {}

/*修改后的代码*/
.pop-content {  
     .input-wrapper /deep/  .form-item {  
    }
  }​

/*编译转换后的代码*/
 .pop-content .input-wrapper[data-v-b93cf8e0] .form-item 

　　③随之而来第三个问题，我只写一个/deep/的话，我写在哪个位置呢，是不是写在哪都行，它们之间有什么区别。

　　ⅰ尝试一：将/deep/写在input-wrapper后面

.pop-content { 
   .input-wrapper /deep/  .form-item {
    padding: 0.4rem 2rem 0.3rem 1.5rem;
    .form-label {
      -webkit-box-flex: 0;
      -ms-flex: 0 0 8rem;
      flex: 0 0 50%;
      font-size: 15px;
      color: black;
      position: relative;
    }
  }

转换后的样式代码：原本的样式已经失效了，并在input-wrapper后面添加了相应唯一的data-v属性值。

　　ⅱ尝试二：将/deep/写在pop-content后面

.pop-content {
  /deep/  .input-wrapper .form-item {
    padding: 0.4rem 2rem 0.3rem 1.5rem;
    .form-label {
      -webkit-box-flex: 0;
      -ms-flex: 0 0 8rem;
      flex: 0 0 50%;
      font-size: 15px;
      color: black;
      position: relative;
    }
  }

转换后的样式代码：原本的样式已经失效了，并在pop-content后面添加了相应唯一的data-v属性值。

　　ⅲ尝试三：将/deep/写在form-item或者form-label后面，均不起作用。看了一下DOM结构，我觉得可能是因为这样做的css的优先级并没有比原来的高，所以没法改变。还有就是这个子组件内部的组件嵌套也比较复杂，所以从最外面的父组件看不出，所以对/deep/位置的放置对其优先级的影响还是比较大的。大致这样理解。