服务器之家
您的位置： 首页 编程语言 css

vue3.2 中CSS 样式穿透

100人浏览   2024-08-25 08:48:30

在Vue 3.2中，你可以使用::v-deep或/deep/选择器来实现CSS样式穿透。

::v-deep是Vue提供的伪元素选择器，它可以让样式穿透到子组件中。例如，假设你有一个父组件和一个子组件，你可以在父组件中使用::v-deep选择器来穿透到子组件中的元素：

<template>
  <div>
    <my-component>
      <div class="my-class">Hello World</div>
    </my-component>
  </div>
</template>

<style scoped>
::v-deep .my-class {
  color: red;
}
</style>

在上面的例子中，::v-deep选择器会穿透到my-component组件中，然后将.my-class选择器应用到子组件中的元素上。

另外，你也可以使用/deep/选择器来实现样式穿透。/deep/选择器与::v-deep选择器的作用相同，但是它是一个已弃用的选择器，不建议使用。

需要注意的是，使用样式穿透可能会导致出现样式冲突的问题，因此建议在必要时才使用。同时，为了避免全局样式的影响，建议在样式中使用scoped属性。

Vue2 中在 scoped 中修改子组件或者组件库中的组件样式，改不了的情况下，就可以用样式穿透，不管是 Less 还是 SASS 都是用 /deep/ .class {} 来做样式穿透，而 Vue3 中就不支持 /deep/ 的写法了，换成 :deep(.class)

<style lang="scss" scoped>
// 这样写不生效的话
.el-form {
    .el-form-item { ... }
}
// Vue2 中这样写
/deep/ .el-form {
    .el-form-item { ... }
}
// Vue3 中这样写
:deep(.el-form) {
    .el-form-item { ... }
}
</style>

// 别再这样加一个没有 scoped 的 style 标签了，全都加到全局上去了
// <style lang="scss">
//  .el-form {
//     .el-form-item { ... }
//  }
// </style>

CSS 绑定 JS 变量

就是 CSS 中可以使用 JS 的变量来赋值，如下

<template>
    <div class="name">沐华</div>
</template>
<script setup>
import { ref } from "vue"
const str = ref('#f00') // 红色
</script>
<style scoped lang="scss">
.name {
    background-color: v-bind(str); // JS 中的色值变量 #f00 就赋值到这来了
}
</style>

相关推荐