vue组件scoped CSS及/deep/深度选择器

• Z时代
• 2024-01-10
• 分类：综合

参考链接：https://vue-loader.vuejs.org/zh/guide/scoped-css.html#%E5%AD%90%E7%BB%84%E4%BB%B6%E7%9A%84%E6%A0%B9%E5%85%83%E7%B4%A0

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

例如（无效）：

<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组件scoped CSS及/deep/深度选择器 的全部内容， 来源链接： utcz.com/z/377267.html