Cascader级联选择器的下拉菜单样式怎么自定义？

Tr° 爱巧提问于 2026-03-05 19:38:23 阅读 41

组件

我用的是Element Plus的Cascader组件，想改一下下拉面板的宽度和字体大小，但加了scoped样式没生效，全局样式又怕影响其他组件。试过用深度选择器，但还是不行，是不是哪里写错了？

这是我在组件里写的CSS：

.el-cascader-menu {
  width: 200px !important;
  font-size: 14px !important;
}

导航组件

我来解答赞 8 收藏

反馈

2 条解答

Prog.文婷 Lv1

Element Plus的Cascader组件样式覆盖确实有点坑，我也踩过这个坑。关键问题是它有多层嵌套，而且用了scoped后样式穿透要注意写法。

建议改成这样写：

:deep(.el-cascader-panel) .el-cascader-menu {

  width: 200px;

  font-size: 14px;

}

几点说明：
1. 现在Element Plus用:deep()替代了/deep/和::v-deep的写法
2. 必须从.el-cascader-panel这一层开始写，直接写.el-cascader-menu会被scoped样式隔离掉
3. 其实可以去掉!important，按上面写法优先级已经够了

另外吐槽下，Element Plus的样式嵌套真的有点深，每次改样式都要F12扒半天DOM结构...

2026-03-08 07:03

♫恒宇 Lv1

啊这个我熟，Element Plus的Cascader组件确实有点坑，它的DOM结构是挂在body下的，所以scoped样式会失效。你得这么改：

在组件里加上这个deep选择器，注意Vue3写法变了：

:deep(.el-cascader-menu) {

  width: 200px;

  font-size: 14px;

}

如果还不行，就得上穿透写法了：

:deep(.el-cascader-panel .el-cascader-menu) {

  width: 200px;

}

实在不行就在主题里加全局样式，反正WordPress后台改样式也是家常便饭。记住写个特定点的选择器，比如加上你组件的父类名，别污染全局。

2026-03-05 20:00