react如何更改antd ＜Cascader /＞组件的下拉菜单的高度

有个需求是<Cascader />组件自带的下拉菜单太短了，如果选项过多的话就得往下拉一个一个找，于是就需要调大这个下拉菜单的高度。但是和<Select />组件一样设置listHeight是不生效的，于是只能找别的方法，就是抓到这个下拉菜单的类名，然后再更改它的样式。

找这个下拉菜单类名的方法有两种：

1、设置<Cascader />的open属性为true，那么这个下拉框就会一直显示了，这个时候再f12去抓类名，这里可以看到类名就是 ant-cascader-menu

 

2、使用dropdownRender属性，按照官方文档的用法，给<Cascader />添加dropdownRender属性后，参数menus就是我们想要更换样式的组件，我们在控制台打印menus，然后可以发现它的样式也是ant-cascader-menu

 

下图是控制台打印的menus

拿到类名后我们就可以在css中更改样式了，代码如下

.ant-cascader-menu {
    height: 250px !important;
    min-width: 150px !important
}

最后是效果展示，可以更改样式后高度就变长了

 参考文章：React使用Antd的cascader修改menu高度 - Ari的小跟班 - 博客园 (cnblogs.com)