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

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

组件

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

这是我在组件里写的CSS：

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

导航组件

我来解答赞 1 收藏

反馈

1 条解答

♫恒宇 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