踩坑】Vue scoped CSS 與深度作用選擇器 /deep/

摘自：https://wolfx.cn/vue-scoped-css-questions/

例如（無效）：

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

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

<style lang="less" scoped>
.text-box {
   input {
    width: 166px;
    text-align: center;
  }
}
</style>
複製程式碼

解決方法:

使用深度作用選擇器 /deep/

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

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

<style lang="less" scoped>
.text-box {
  /deep/ input {
    width: 166px;
    text-align: center;
  }
}
</style>
複製程式碼

官方文件：vue-loader.vuejs.org/guide/scope…

我在使用elelment-ui 時踩的坑：