antd popOver组件样式修改当前页面样式

修改popOver组件的样式的时候发现定义了className不起作用,antd的样式覆盖不了
原因:不支持className,而是tooltip的overlayClassName

<Popover 
	content={renderContent()} 
	title={''} 
	overlayClassName={styles.pop} 
	trigger={'click'}>
	<div className={styles.tipIcon}/>
</Popover>
.pop{
    :global{
        .ant-popover-inner{
            background-color: #2D3B5A;
        }
        .ant-popover-placement-top > .ant-popover-content > .ant-popover-arrow, .ant-popover-placement-topLeft > .ant-popover-content > .ant-popover-arrow, .ant-popover-placement-topRight > .ant-popover-content > .ant-popover-arrow{
            border-right-color: #2d3b5a;
            border-bottom-color: #2d3b5a;
            background: #2d3b5a;
        }
    } 
}

即可修改针对当前页面的局部样式

  • 9
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
根据引用\[1\]中的代码,你使用了antdPopover组件,并尝试通过定义overlayClassName来修改样式。然而,你发现定义了className没有起作用。原因是antdPopover组件不支持className属性,而是使用overlayClassName来定义样式。你可以将className改为overlayClassName来解决这个问题。 另外,根据引用\[2\]中的代码,你提到antd popover的位置不对。为了解决这个问题,你可以尝试添加高度和宽度来调整popover的大小和位置。你可以在overlayStyle属性中添加样式,例如设置宽度为208.34px,高度为267px。或者在slot="content"下的元素中添加高度和宽度来调整popover的位置。 综上所述,你可以通过修改overlayClassName来定义样式,并通过添加高度和宽度来调整antd popover的位置。 #### 引用[.reference_title] - *1* [antd popOver组件样式修改当前页面样式](https://blog.csdn.net/sunzhen15896/article/details/116301731)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [antd Popover 气泡卡片,首次位置不对解决方法](https://blog.csdn.net/u014206461/article/details/120214793)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值