修改ElementUI的message组件的样式

时间:2024-03-18 21:24:42

ElementUI的组件适用于大部分场景,但是部分组件的样式需要更改,今天就简单说一下修改ElementUI的message组件的样式

      这是message组件的默认的显示样式

修改ElementUI的message组件的样式

通过审查元素可以发现,ElementUI是通过 .el-message来控制它的样式的,既然这个样式找到了 我们就可以通过全局覆盖的方式对它进行修改

修改ElementUI的message组件的样式
同时如果我们想要修改icon或者文字的样式也可以通过这种方式来进行修改

修改文字的类名为el-message__content(通常不需要修改)

修改不同icon的样式为

       使用.el-message__icon来修改icon的大小和位置

      使用.el-icon-success/.el-icon-warning/.el-icon-error/.el-icon-info来控制icon的颜色
修改ElementUI的message组件的样式