前言

在阅读本文前，首先需要了解 Vue在父组件中改变子组件内的某个样式的方法。

在使用前端UI框架（如iVew、element UI）时，有一些组件的样式我们无法通过正常设置css样式进行精确修改。
比如：用 style="height:200px" 设置iVew Select组件的高度，无论怎么设置，它的输入框高度一直为36px，变化的只是组件中包含输入框的div的高度，那如果想要修改Select组件输入框的高度，我们应该怎么办？

方法

很简单，一共分两步，以修改iVew Select组件的高度为例：

1. 在浏览器页面使用F12键，将Select组件中控制输入框样式的class挖出来：

在这我已经定位到了Select的输入框上，在右侧显示出来的class中修改数值，试一下哪个才是控制输入框高度的class，这边我已经试出来 .ivu-select-large .ivu-select-single .ivu-select-selection 控制着它的高度。

2. 最关键的一步： 使用 /deep/ 深度选择器对框架的样式进行覆写：

 /deep/ .ivu-select-large .ivu-select-single .ivu-select-selection {
    height: 50px;
  }

此时，iVew Select组件输入框的高度已经被我修改成了50px：

扩展

有时候，框架中的某些元素为了保持风格统一，会使用同一些class。
如上示例中，Select 的input框就是用了同一些class，这样当class被覆写时，所有Select的input都会发生改变（上图可以看出三个Select的高度都变成了50px）。

如果想要单独修改某一个input框，可以先在vue中声明一个class作为这个组件的标识，然后再进行 /deep/ 覆写。
假如我给第一个Select声明了一个class，name为 select-1，那代码可以写成：

 /deep/ .select-1 .ivu-select-large .ivu-select-single .ivu-select-selection {
    height: 50px;
  }

这样就可以只修改第一个Select了！