We Keep Coding

getting typescript error in react + mui while creating tabs?

I am creating custom hook of accordion component . I am getting below error
export default const Tabs: OverridableComponent<TabsTypeMap<{}, ExtendButtonBase<ButtonBaseTypeMap<{}, "button">>>>
here is my code
https://codesandbox.io/s/epic-easley-ek3ev5?file=/src/App.tsx
export default function BasicTabs() {
const { register, value } = useTabs();
return (
<Box sx={{ width: "100%" }}>
<Box sx={{ borderBottom: 1, borderColor: "divider" }}>
<Tabs {...register()} aria-label="basic tabs example">
<Tab label="Item One" {...a11yProps(0)} />
<Tab label="Item Two" {...a11yProps(1)} />
<Tab label="Item Three" {...a11yProps(2)} />
</Tabs>
</Box>
<TabPanel value={value} index={0}>
Item One
</TabPanel>
<TabPanel value={value} index={1}>
Item Two
</TabPanel>
<TabPanel value={value} index={2}>
Item Three
</TabPanel>
</Box>
);
any suggestion

In your useTabs you should change change React.ChangeEvent to React.SyntheticEvent as the signature of onChange is function(event: React.SyntheticEvent, value: any) => void in <Tabs /> : https://mui.com/material-ui/api/tabs/

How to make material ui tabs be active for only specific url

so I am trying to figure out how to handle a clash an issue I am seeing with having the active tab indicator on the right tab. So I have some tabs in my navbar that will take you to three different routes. However, there are two routes that are pretty similar.
<Tabs indicatorColor="primary" value={this.state.tabsValue} onChange={this.setTabsValue}>
<Tab className={classes.tab}
label="Main"
value="main"
component={Link}
to="/main"
classes={{ selected: classes.selectedTab, }} />
<Tab className={classes.tab}
label="Shoes"
value="shoes"
component={Link}
to="/sale/shoes"
classes={{ selected: classes.selectedTab, }} />
<Tab className={classes.tab}
label="Sale"
value="sale"
component={Link}
to="/sale"
classes={{ selected: classes.selectedTab }} />
</Tabs>
setTabsValue = (obj, val) => {
this.setState({
tabsValue: val
});
};
So there are two routes that are pretty similar. The tab with associated route '/sale/shoes' and the tab with associated route '/sale'. I want to get it so that the 'Sale' tab should only be active for the route '/sale'. But it seems that if the user were to be on the '/sale/shoes' route, the Sale tab would be active. Im guessing because both tabs have a route that has 'sale' in it. Any way to take care of this?

From what I can tell it seems like you may want to switch to using the NavLink component which has built-in route path matching, and then only need to specify the exact prop of the NavLink to get it to exactly match a given URL pathname.
<Tabs
indicatorColor="primary"
value={this.state.tabsValue}
onChange={this.setTabsValue}
>
<Tab
classes={{ selected: classes.selectedTab }}
className={classes.tab}
label="Main"
value="main"
component={NavLink}
to="/main"
exact
/>
<Tab
classes={{ selected: classes.selectedTab }}
className={classes.tab}
label="Shoes"
value="shoes"
component={NavLink}
to="/sale/shoes"
exact
/>
<Tab
classes={{ selected: classes.selectedTab }}
className={classes.tab}
label="Sale"
value="sale"
component={NavLink}
to="/sale"
exact
/>
</Tabs>

div height doesn't adjust when Accordion is collapsed

I have two charts on top of each other that extend to the bottom of the screen. The first is collapsible via an Accordion.
However, if I do the following two things in sequence:
Make my browser window bigger
Then, collapse the Accordion (i.e., minimize the first graph).
Then there will be unwanted whitespace below the second graph.
<Flex direction="column" height="calc(100vh)" className="flex-wrapper">
<Box fontSize={["sm", "md", "lg", "xl"]}>Font Size</Box>
<Flex className="flex-wrapper0">
<div>123456789010</div>
<Box className="accordion-box-container">
<Accordion className="accordion-wrapper" allowToggle>
<AccordionItem>
<h2 className="accordion-title">
<AccordionButton
className="accordion-button"
borderRadius="md"
borderWidth="0px"
_focus={{ boxShadow: "none" }}
>
<Box
textAlign="left"
h={3}
_focus={{ boxShadow: "none" }}
></Box>
<AccordionIcon />
</AccordionButton>
</h2>
<AccordionPanel p="0">
<Box height="30vh">
<ThreeDataPoint />
</Box>
</AccordionPanel>
</AccordionItem>
</Accordion>
<div className="graph-wrapper">
<ThreeDataPoint />
</div>
</Box>
</Flex>
</Flex>
It seems like some interaction problem between browser resizing and css? I think I need to force a re-rendering of <ThreeDataPoint /> whenever the accordion button is pressed so that it can pick up the new height that it's supposed to be using. I wonder how to force such a re-rendering?
Here's codesandbox:
https://codesandbox.io/s/elegant-fermat-bugv1?file=/src/index.tsx
And the app URL:
https://bugv1.csb.app/

It was because of this !important flag causing troubles in the css file:
.graph-wrapper div {
height: 100% !important;
}
After commenting this out, it worked as expected.

Material-UI : tab not responsive with a datatable inside

I use the Simple Tabs from Material-UI and I have one Tab how contain a Datatable (React-Data_Table) and this tab is not responsive like other when the table is full
Empty
Full
The code
<Grid item xs={12}>
<Paper className={classes.paper}>
<AppBar position="static" className={classes.appBar}>
<Tabs value={value} onChange={handleChange} classes={{ indicator: classes.indicator }} variant="fullWidth">
<Tab label="Tableau" {...a11yProps(0)} />
<Tab label="Graphique" {...a11yProps(1)} />
<Tab label="Carte" {...a11yProps(2)} />
</Tabs>
</AppBar>
<TabPanel value={value} index={0}>
<Table sections={props.sections}/>
</TabPanel>
<TabPanel value={value} index={1}>
<Graph />
</TabPanel>
<TabPanel value={value} index={2}>
<AppMap />
</TabPanel>
</Paper>
</Grid>
I don't know how to fix this except maybe make a CSS to change width with size screen
Thanks for the help

If the child element is exceeding it's parent's size(container element) I would recommend to try using max-width to ensure the width doesn't pass a certain limit.

Using Dividers inside Material-UI Tabs

If I want to use a Divider or something else that isn't a Tab inside Material-UI Tabs, I get DOM warnings in the console.
<Tabs ...>
//...
<Divider />
//...
</Tabs>
A workaround for this is to create a middleman-kind class like this:
<Tabs ...>
//...
<MDivider />
//...
</Tabs>
function MDivider(props) {
return <Divider />;
}
But I was thinking if this is the best solution to solve the issue or if there are other, better ways to stop getting the warning.
codesandbox with error here
codesandbox with fix here

Ok, so I think I found the best fix based on how the MUI Tabs are meant to be used. If Tabs are only meant to have MUI Tab children inside, then the MUI-intended way to do this would be to add the Divider like this:
<Tab label="" icon={<Divider />} disabled />
, give it a className and style it accordingly. The Tab component is a button with stuff inside, so you would need to override some paddings and min-heights in css.

you can use the Dividers in between each Tab as follows:
<Box
style={{
display: "flex",
justifyContent: "flex-end",
marginRight: 20,
}}
>
<Tabs
sx={{ backgroundColor: "#EAEBEF", borderRadius: 4 }}
value={tab}
onChange={(e, v) => setTab(v)}
>
<Tab label="Item One" />
<Divider
orientation="vertical"
style={{ height: 30, alignSelf: "center" }}
/>
<Tab label="Item Two" />
<Divider
orientation="vertical"
style={{ height: 30, alignSelf: "center" }}
/>
<Tab label="Item Three" />
</Tabs>
</Box>

Using CSS to add a border to the top of the tab seems to work well for me.
const useStyles = (theme) => ({
withDivider: {
borderTop: `1px solid ${theme.palette.divider}`,
},
});
<Tabs>
<Tab>...<Tab/>
<Tab>...<Tab/>
<Tab className={classes.withDivider}>...<Tab/>
<Tab>...<Tab/>
</Tabs>

Just for anyone wondering why the divider doesn´t show up, add the orientation property and set it to "vertical" so the divider can be visible in horizontal Tabs.
<Tab label="" icon={<Divider orientation="vertical" />} disabled />