【踩坑】Vue scoped CSS 与深度作用选择器 /deep/

最新推荐文章于 2023-02-15 15:10:01 发布

weixin_30698527

最新推荐文章于 2023-02-15 15:10:01 发布

阅读量220

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/mozhaocong/p/10443647.html

本文详细解析了Vue中scoped样式的使用方法，包括如何避免父组件样式渗透到子组件，以及如何使用深度作用选择器来解决特定样式需求。通过实例展示了在使用scoped样式时的常见问题及解决方案。

使用 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>

官方文档：https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors

转载自 https://wolfx.cn/vue-scoped-css-questions/

转载于:https://www.cnblogs.com/mozhaocong/p/10443647.html