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

最新推荐文章于 2025-04-03 09:30:04 发布

cat10month

最新推荐文章于 2025-04-03 09:30:04 发布

阅读量7.9k

点赞数 10

分类专栏：前端开发工程师文章标签： javascript css

本文链接：https://blog.youkuaiyun.com/sunzhen15896/article/details/116301731

版权

前端开发工程师专栏收录该内容

42 篇文章

订阅专栏

在修改Ant Design的Popover组件样式时遇到困扰，发现直接使用`className`无法生效。其实，Antd Popover支持的是`overlayClassName`属性来定制内部样式。通过设置`.pop`类并结合全局样式，成功覆盖了默认背景颜色和箭头样式，实现了对当前页面局部样式的调整。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

修改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;
        }
    } 
}

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