首页 > 其他分享 >vue3 中element-plusDropdown 背景色改变

vue3 中element-plusDropdown 背景色改变

时间:2023-01-28 10:23:03浏览次数:42  
标签:el 样式 element plusDropdown popper vue3 组件

vue3 中element-plus Dropdown组件样式改变

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

这里我们以el-popper为例,修改相关样式

  • 修改前
    image

  • 修改后
    image

  • 首先在项目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;
}

标签:el,样式,element,plusDropdown,popper,vue3,组件
From: https://www.cnblogs.com/rain111/p/17029911.html

相关文章