element 自定义样式后悬停效果怎么自定义

Question

上面是我自定义的，下面的是我悬停在按钮上的，它还是会变成el默认蓝色，我！important也没用，这个有老哥搞过吗

Answer 1

样式覆盖，基本就是加权重重写，而权重都加到!important还没有用，八成是选择器的问题。

先来分析下，正常这个蓝色按钮，起作用的样式选择器是.el-button--primary，权重就是这一个class，鼠标悬停后起作用的选择器是.el-button--primary:focus,.el-button--primary:hover，鼠标按下起作用的选择器是.el-button--primary.is-active, .el-button--primary:active，如果要覆盖的话就是重写这几个样式就行了。

比如在选择器前加个body，直比当前选择器权重大1，但是就有效，但是这样就修改了全部蓝色按钮样式了，逍遥修改某些样式，那就在那些位置加上你自定义的类名，用这个类名作为选择器前置内容。

你这里加上!important还没有用，估计样式覆盖写的选择器不是.el-button--primary或.el-button--primary:focus,.el-button--primary:hover

Answer 2

我猜测你的style标签的属性一定是scoped吧,element ui的CSS不能在scoped里面进行修改,会无效的,建议你在下面在加一个style标签，这个style标签去掉scoped，把要修改的element 的css 放到这个标签下，这样就好啦