关于vue中修改elementui默认样式的问题

最新推荐文章于 2025-06-11 12:21:17 发布

原创最新推荐文章于 2025-06-11 12:21:17 发布 · 1.8k 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍在使用ElementUI时如何避免样式冲突，通过为组件根节点添加特定class或id，结合局部样式，实现精确的样式修改，而不影响全局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题：修改elementui默认样式的时候，如果把样式写在该组件<style scoped></style>中，可以发现样式并没有生效及不会修改。
把样式写在<style></style>中，样式会被修改，但是会影响其他组件，及修改的样式为全局样式。
注：写一个外部css文件，再把其引用在<style scoped></style>中，同样会修改全局样式。
解决方法：
在该组件的根节点添加一个class或id属性，并命名，（如<div class="mydiv"></div>）。在<style></style>中修改样式，选择器加上根节点的class名或id名即可。