[ANTD][CSS]覆盖某单一组件样式

本文解决了一个在使用Cascader组件时遇到的问题:当options数量过多时,下拉菜单高度不足。通过修改CSS文件中的全局样式,成功调整了下拉菜单的高度,但该修改会影响到所有Cascader组件。最终,通过创建特定类名并将其应用于目标组件,实现了只改变特定Cascader组件的样式。

覆盖某单一组件样式

  1. 遇到的问题
    截图来自antd示例

    在使用Cascader时,如果options较多,下拉菜单高度太小,但是Cascader组件popupClassName属性不能修改下拉菜单高度(菜单高度整体会修改,但实际显示option的区域不会变)。

  2. 问题原因
    检查发现实际控制option样式的类名如图。
    在这里插入图片描述

  3. 覆盖原有样式
    在css文件中覆盖其样式

     :global {
            .ant-cascader-menu {
                height: 500px !important;
            }
        }
    

    原来的样式被覆盖掉了。

  4. 再次发现问题
    在其他component中使用Cascader组件时,样式同样被覆盖成我上面改的样子。

  5. 解决

    1. 修改css文件上述代码
    .myCascaderMenu {
        :global {
            .ant-cascader-menu {
                height: 500px !important;
            }
        }
    }
    

    2.将“.myCascaderMenu”引入即可

    	import Style from '../style.less';
    	...	
    	
    	<Cascader
    		options={options}
    		popupClassName={Style.myCascaderMenu}
    	/>
    

** 其他组件同理,可以尝试修改

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值