修改elementUI等UI组件样式的5种方法总结，哪些情况需要使用/deep/, :deep()等方式来穿透方法大全

最新推荐文章于 2026-04-21 11:23:32 发布

原创

最新推荐文章于 2026-04-21 11:23:32 发布 · 2.8k 阅读

收录于

当前文章被以下社区和专栏收录：

文章目录

在 Element UI 中，有时我们需要改写某些组件的样式，比如 ElMessage， el-form等。

比如下面的需求：

它渲染后的DOM结构为：

我这里总结了5种修改任意UI库组件的方法。也就是除了elementUI，也适用于antd,vant等UI库。

方法 1：全局修改样式

你可以在全局的 CSS 中，比如common.css等在main.js中导入的css文件中，直接根据渲染后的elementUI的组件样式来修改。

示例：修改 `ElMessage` 的背景色和字体颜色

如上图，ElMessage组件渲染后的结构，有个class='ell-message'，可以直接在全局样式中改写规则。

/* 在 common.css等公共样式 或组件的 <style> 中添加 */
.el-message {
   
   
  background-color: #f0ad4e !important;  /* 更改背景颜色 */
  color: white !important;  /* 更改字体颜色 */
  border-radius: 5px !important;  /* 可选：修改圆角 */
  font-size: 16px !important;  /* 可选：修改字体大小 */
}