使用antd中Tabs内嵌套使用DatePicker控件选择时间弹窗定位错误解决办法

最新推荐文章于 2024-12-05 11:05:38 发布

日月之行_

最新推荐文章于 2024-12-05 11:05:38 发布

阅读量2.3k

点赞数

分类专栏：前端框架 antd

本文链接：https://blog.csdn.net/web_yueqiang/article/details/90479666

版权

antd 同时被 2 个专栏收录

9 篇文章

订阅专栏

前端框架

4 篇文章

订阅专栏

博客指出点击开始时间控件出现错误，分析原因是控件在样式中添加内容致定位失败，给出的解决方法是在父级加类名并修改类名样式，还展示了修复后的效果。

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

点击开始时间控件，错误如图：
在这里插入图片描述

分析原因：Tabs控件在样式中.ant-tabs添加了overflow:hidden，导致时间控件定位失败.

解决方法：在Tabs父级加class类名，修改类名ant-tabs样式

	<div className="record-message">
      <Tabs activeKey={activeKey} onChange={this.onTabsChange}>
        <TabPane tab="未发送" key="unsent" className="homepage-tab1">
          <UnsentMsg />
        </TabPane>
        <TabPane tab="发送成功" key="send" className="homepage-tab1">
          456
        </TabPane>
      </Tabs>
    </div>
    
	//index.scss内添加以下样式
	.record-message {
	  	.ant-tabs {
	    	overflow: visible;
	  	}
	}

修复后，效果如下：
在这里插入图片描述