elementUI样式修改（Cascader 级联选择器）

最新推荐文章于 2025-06-03 10:41:24 发布

原创最新推荐文章于 2025-06-03 10:41:24 发布 · 2.7w 阅读

6 ·

CC 4.0 BY-SA版权

本文分享了在使用ElementUI的级联选择器(Cascader)时，遇到的样式覆盖难题及解决方法。通过调整CSS选择器的优先级，成功实现了组件样式的个性化定制，避免了全局样式污染。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

elementui的问世，大大提高了前端开发的工作效率，但同时也
带给我们不少烦恼。我们要用UI组件就免不了要对它做一些个性化定制需求，所以我们就必须要覆盖element的一些样式

下面是我开发中遇到的实例：

首先引入Cascader级联选择器，效果如图：
在这里插入图片描述
很明显这个样式不是我们需要的，那么就需要处理了…

：附上控制台中的html
在这里插入图片描述
接下来，我在单页面组件下面新建style，然后改变它的样式

.el-popper .el-cascader-panel .el-cascader-menu .el-scrollbar_ wrap .el-cascader-menu_ list .el-cascader-node{
          font-size: 14px;
          padding: 0 20px;
          position: relative;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          color:  #fffff;
          height: 34px;
          line- height: 34px;
          -webkit-box- sizing: border-box;
          box- sizing: border- box;
          cursor: pointer;
      }

刷新后它的样式还是如此
在这里插入图片描述
之后我尝试把元素ul,li的class名删掉，直接换成ul li

<style>
    .el -popper .el-cascader- panel .el-cascader-menu . el-scrollbar_ wrap ul li{
           font -size: 14px;
           padding: 0 20px;
           position: relative;
           white-space: nowrap;
           overflow: hidden;
           text-overflow: ellipsis;
           color: #fffff;
           height: 34px;
           line-height: 34px;
           -webkit-box-sizing:border- box;
           box-sizing: border- box;
           cursor: pointer;
        }
     .el-popper .el-cascader- panel .el-cascader-menu .el-scrollbar_ wrap ul li .el-icon-arrow-rightf{
           position: absolute;
           top: 50%;
           left: 85%;
           transform: translate(- 5e%, -50%);
      }
      </style>