vue3 中element-plus Dropdown组件样式改变
最近打算学习一下vue3,引入组件库的时候了解到vue3推荐使用element-plus,本以为和elememt-ui用起来差不多的,但是还是天真了(深深叹气),一个下拉菜单的样式搞了一天都没成功,快给我整抑郁了。。。所以在此记录一下,举一反三,其他组件样式的更改也可这么做。刚开始我双手插兜,丝毫没把这问题放在心上,修改组件样式那还不是轻而易举,样式穿透、深度选择器一顿改…丝毫没有变化,然后我感到一丝不妙,开始对着开发者工具仔细找对应的选择器,好像也没什么变化,不就是这样的吗,到底哪里出了问题呢?带着疑惑我打开了度娘,大部分仍然建议
>>>
,/deep/
,:deep()
,::v-deep
,我凌乱了,难道是只有我这样子吗?不撞南墙不回头,我倔强地继续尝试,终于改成功了!(接下来的方法是建立在上述方法都没用的情况下)
这里我们以el-popper
为例,修改相关样式
-
修改前
-
修改后
-
首先在项目assets文件夹下创建style文件,(在这个文件夹下可放置跟样式相关的文件),然后在文件夹下创建popcss.css文件,在里面写自定义样式
.el-dropdown-menu.el-dropdown-menu--default{
background-color: #2E3946;
}
.el-popper.is-light .el-popper__arrow::before{
background-color: #2E3946;
}