本文主要介绍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!'