antDesign: tabs styles - reactjs

Question

image-1:
image-2:
I have a project that contains several interfaces, and among these interfaces there is an interface that displays two tables through “Tabs”, when I click on the first tab it displays the first table and when I click on the second tab it displays the second table, but my problem is only in the style of the Tabs and not my problem In the content, I want the style of the second image to be the same as the style of the first image
file.tsx:
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';
const { TabPane } = Tabs;
interface PatientListPageProps { }
const PatientListPage: FunctionComponent<PatientListPageProps> = () => {
return (
<>
<div style={{ background: '#fff', padding: '16px', borderColor: 'transparent', borderRadius: '4px' }}>
<Tabs type="card">
<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;

Answer 1

i think you must custom the css.
in tabs add the new name of classname
.custom-classname .ant-tabs-rtl {
direction: ltr !important;
}
if it doesn't change you can try using
.custom-classname {
direction: ltr !important;
}
then if you want the contents of the tab to stay on the right, you have to also customize the css so that the direction stays on the right

Answer 2

i think you will use ":global" to overwrite the default style in antd
like this
:global {
.ant-select-selection-item {
// overwrite style
...
}
}