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;

CodePudding user response：

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

CodePudding user response：

i think you will use ":global" to overwrite the default style in antd like this

:global {
   .ant-select-selection-item {
     // overwrite style
     ...
   }
}