我帮你搞定这个Tabs样式调整的问题！看你的现有代码，你用了Ant Design的type="card"属性，这就是当前卡片式样式和参考样式差异的核心原因。咱们一步步修改，让它贴合你的需求：

第一步：修改组件基础配置 #

先移除type="card"，并给Tabs添加自定义类名，方便后续精准定制样式：

import _ from 'lodash';
import { FunctionComponent } from 'react';
import { Tabs } from 'antd';
import AllPatients from './components/all-patients';
import AllPresentPatient from './components/present-patients';
import { FormattedMessage } from 'react-intl';
import './PatientListPage.css'; // 引入自定义样式文件
const { TabPane } = Tabs;

interface PatientListPageProps { }

const PatientListPage: FunctionComponent<PatientListPageProps> = () => {
  return (
    <>
      <div style={{ background: '#fff', padding: '16px', borderColor: 'transparent', borderRadius: '4px' }}>
        {/* 移除card类型，添加自定义类名 */}
        <Tabs className="custom-tabs">
          <Tabs.TabPane tab={<FormattedMessage id='all' />} key="1">
            <AllPatients />
          </Tabs.TabPane>
          <Tabs.TabPane tab={<FormattedMessage id='attendees' />} key="2">
            <AllPresentPatient />
          </Tabs.TabPane>
        </Tabs>
      </div>
    </>
  );
};

export default PatientListPage;

第二步：编写自定义样式 #

创建PatientListPage.css文件，通过覆盖Ant Design的内置类名，把Tabs调整成类似参考样式的效果（下面的样式是通用的下划线式风格，你可以根据参考图调整颜色、间距、厚度等数值）：

/* 自定义Tabs容器样式 */
.custom-tabs .ant-tabs-nav {
  border-bottom: 1px solid #e8e8e8; /* 底部分隔线，匹配参考样式的边框 */
  margin-bottom: 16px; /* 标签栏和表格内容的间距 */
}

/* 普通标签样式 */
.custom-tabs .ant-tabs-tab {
  padding: 12px 24px; /* 增大点击区域，提升交互体验 */
  font-size: 14px;
  color: #666; /* 默认文字颜色 */
}

/* 选中标签样式 */
.custom-tabs .ant-tabs-tab-active {
  color: #1890ff; /* 用Ant Design主题色作为高亮色 */
  font-weight: 500;
}

/* 选中标签的下划线 */
.custom-tabs .ant-tabs-ink-bar {
  background-color: #1890ff;
  height: 2px; /* 下划线厚度，更醒目 */
}

/* 标签hover效果 */
.custom-tabs .ant-tabs-tab:hover {
  color: #1890ff;
}

按需调整细节 #

如果你的参考样式有特殊要求（比如标签带圆角背景、无底部边框、字体更大等），可以修改CSS里的属性：

• 若参考样式是选中标签带浅色背景：给.ant-tabs-tab-active加background-color: #f0f5ff; border-radius: 4px 4px 0 0;
• 若不需要底部边框：删除.ant-tabs-nav里的border-bottom属性
• 调整字体大小：修改.ant-tabs-tab里的font-size值

内容的提问来源于stack exchange，提问作者Hiba Youssef