解决Vue 3在使用element-plus时重写样式不起作用的问题

本文主要介绍Vue 3在使用element-plus时重写样式不起作用的几种情况。

---

情况一

首先检查一下<style>标签中是否带有scoped，在 Vue3 中， style 标签中的 scoped 属性可以将样式限制在当前组件的作用域内，并且不会影响其他组件。这样做可以避免组件之间样式的冲突，提高了组件化开发的效率。

scoped 属性实现的原理是，Vue 在编译时会给当前组件的所有样式选择器添加一个唯一的属性（比如 _data-abc），然后在渲染时，会给当前组件的根元素添加这个唯一属性作为样式的前缀，这样就能保证只有当前组件的样式会生效。

例如，以下代码中的样式只会应用在当前组件内部，不会影响其他组件：

<template>
  <div class="container">
    <h1>{
  { message }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello world!'