Vue scoped CSS 与深度作用选择器 /deep/

使用 scoped 后，父组件的样式将不会渗透到子组件中。

例如（无效）：

<template>
  <div id="box">
    <el-input  class="text-box" v-model="value"></el-input>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      value: 'nice'
    };
  }
};
</script>

<style lang="less" scoped>
.text-box {
   input {
/* 无效*/
    width: 100px;
    text-align: center;
  }
}
</style>

那我们如何解决呢？使用深度作用选择器 /deep/，直接上代码：

<template>
  <div id="box">
    <el-input v-model="value" class="text-box"></el-input>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      value: 'nice'
    };
  }
};
</script>

<style lang="less" scoped>
.text-box {
  /deep/ input {
    width: 100px;
    text-align: center;
  }
}
</style>