1.问题由来
在使用某个组件库中的表格组件时，查看官方文档，有设置是否展示外边框和列边框，有改变列宽度等API。就是没有改变每一行高度的。凑巧的是，我们的需求就是要改变每一行的高度。怎么办呢？写个css不就好了么。

基本代码如下：

//newMaterialTopic.vue
<template>
    <div class="table-container">
        <fa-table id="material-table">
        </fa-table>
    </div>
</template>
<script>...</script>
<style lang="less" scoped>
#material-table{
  opacity: 1;
  .fa-table-row {
       height: 60px;
  }
}
    
</style>

1616046721(1).jpg

通过Chrome开发者工具找到每一行的tr标签存在一个class为fa-table-row,进行改写样式。修改完发现并没有效果，每行高度依旧没有变化。当我去掉scoped时样式才起了作用。

2. style scoped
   ①从官方文档了解到，当 <style> 标签有 scoped 属性时，它的 CSS 只作用于当前组件中的元素。它通过使用 PostCSS 来实现以下转换：
   
   1616048350(1).jpg

通过以上例子发现：添加了scoped属性的组件，为了达到组件样式模块化，做了两个处理：

给HTML的DOM节点加一个不重复data属性(形如：data-v-f3f3eg9)来表示他的唯一性
在每句css选择器的末尾（编译后的生成的css语句）加一个当前组件的data属性选择器（如[data-v-f3f3eg9]）来私有化样式

scoped的这一操作，虽然达到了组件样式模块化的目的，但是会造成一种后果：每个样式的权重加重了，理论上我们要去修改这个样式，需要更高的权重去覆盖这个样式。

②上面的例子分析了单个组件渲染后的结果,那么组件互相调用之后会出现什么样的结果呢？也就是我们遇到的问题这种场景，newMaterialTopic组件调用了第三方组件库的表格组件。

当加上scoped回到我们的问题，仔细发现确实如文档所说的，当前组件中的元素统一添加了一个随机的属性（下图 data-v-1a76cd32）,编译的css也会对应加上这个随机属性。如下图所示：

1616049189(1).jpg

虽然我们在newMaterialTopic添加了想要修改表格组件tr标签的样式，但是仔细看，编译出来的css其实是

#material-table[data-v-1a76cd32] {
      opacity: 1;
}
#material-table .fa-table-row[data-v-1a76cd32]{
      height: 60px
}

这其实根本作用不到我们想要的DOM节点上，所以这种情况我们在newMaterialTopic内部写的任何样式都不会影响到tr元素，所以这就尴尬了。

去掉了scoped后，Style标签里边的样式变成全局的了,这不是我们想要的结果。使用 scoped 后，父组件的样式将不会渗透到子组件中，那我们该如何解决？

4.深度作用选择器

我们所谓的渗透，官方叫做深度选择器。就是在我们想穿透的选择器前边添加 >>> 或者 /deep/ 或者 ::v-deep。

1616049560(1).jpg

于是我们修改为如下代码,再回到浏览器，发现成功修改了每行的高度。

<style lang="scss" scoped>
#material-table {
    opacity: 1;
    /deep/.fa-table-row {
           height: 60px;
    }
}
</style>

1616053967(1).jpg

编译出来的css是

#material-table[data-v-1a76cd32] {
      opacity: 1;
}
#material-table[data-v-1a76cd32] .fa-table-row{
      height: 60px
}