vue3 中element-plusDropdown 背景色改变

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;
}