I have been working on a ReactJS code and I'm struggling to achieve the desired result. Specifically, I am using Material UI tabs and I want them to be aligned in line with an icon. The goal is to have the tabs and the ArrowBackIcon in perfect alignment, similar to what you can see in this image:
Desired Result: https://i.sstatic.net/paNWb.png
This is what I currently have: https://i.sstatic.net/TXVF6.png
Below is the CSS section for reference:
.MuiTabs-root {
margin-bottom: 10px;
border-bottom: 1px solid black;
}
.tab__section {
display: flex;
flex-direction: column;
}
.tab__section>.MuiSvgIcon-root {
margin-top: 12px;
}
.MuiTabs-flexContainer {
display: flex;
align-items: center;
justify-content: center
}
And here's the corresponding ReactJS code snippet:
const [selectedTab, setSelectedTab] = useState(0);
const handleChange = (event, newValue) => {
setSelectedTab(newValue);
}
<div className="tab__section">
<ArrowBackIcon />
<Tabs
value={selectedTab}
onChange={handleChange}
TabIndicatorProps={
{
style: {
backgroundColor: "blue",
height: "4px",
}
}}
>
<Tab label="Synchronize Cabinet"></Tab>
<Tab label="Schedule Information"></Tab>
</Tabs>
{selectedTab === 0 && <SyncCabinet />}
{selectedTab === 1 && <ScheduleInfo />}
</div>