覆盖某单一组件样式
-
遇到的问题
在使用Cascader时,如果options较多,下拉菜单高度太小,但是Cascader组件popupClassName属性不能修改下拉菜单高度(菜单高度整体会修改,但实际显示option的区域不会变)。
-
问题原因
检查发现实际控制option样式的类名如图。
-
覆盖原有样式
在css文件中覆盖其样式:global { .ant-cascader-menu { height: 500px !important; } }
原来的样式被覆盖掉了。
-
再次发现问题
在其他component中使用Cascader组件时,样式同样被覆盖成我上面改的样子。 -
解决
- 修改css文件上述代码
.myCascaderMenu { :global { .ant-cascader-menu { height: 500px !important; } } }
2.将“.myCascaderMenu”引入即可
import Style from '../style.less'; ... <Cascader options={options} popupClassName={Style.myCascaderMenu} />
** 其他组件同理,可以尝试修改