Reputation: 73
Tabs disappearing when clicking, most of the code is from material-ui docs.Here I am using material-ui 5. Don't understand why the code behaves like this. The styling is also from material ui 5. This is a simple navigation bar, with 5 tabs
import React, { useState } from 'react'; import { AppBar, Toolbar, Tabs, Tab, useScrollTrigger, Box, Button } from '@mui/material'; import { styled } from '@mui/material/styles'; import logo from '../../assets/logo.svg';
const ElevationScroll = props => { const { children } = props;
const trigger = useScrollTrigger({
disableHysteresis: true,
threshold: 0,
});
return React.cloneElement(children, {
elevation: trigger ? 4 : 0,
});
};
const ToolbarMargin = styled('div')(({ theme }) => ({
...theme.mixins.toolbar,
marginBottom: '3em',
}));
const StyledTab = styled(Tab)(({ theme }) => ({
...theme.typography.tab,
minWidth: 10,
marginLeft: '25px',
color: 'white',
}));
const StyledButton = styled(Button)(({ theme }) => ({
...theme.typography.estimate,
borderRadius: '50px',
marginLeft: '50px',
marginRight: '25px',
height: '45px',
}));
const Header = props => {
const [value, setValue] = useState(0);
const handleChange = (e, newvalue) => {
setValue(newvalue);
};
return (
<React.Fragment>
<ElevationScroll>
<AppBar position='fixed'>
<Toolbar disableGutters={true}>
<Box component='img' sx={{ height: '7em' }} alt='company logo' src={logo} />
<Tabs value={value} onChange={handleChange} sx={{ marginLeft: 'auto' }}>
<StyledTab label='Home' />
<StyledTab label='Services' />
<StyledTab label='The Revolution' />
<StyledTab label='About Us' />
<StyledTab label='Contact Us' />
</Tabs>
<StyledButton variant='contained' color='secondary'>
Free Estimate
</StyledButton>
</Toolbar>
</AppBar>
</ElevationScroll>
<ToolbarMargin />
</React.Fragment>
);
};
export default Header;
Upvotes: 3
Views: 1449
Reputation: 1707
The tabs feels like disappearing, because the selected
class on the tab is having the same color as the background color of the tabs
. You can inspect the behavior in the Inspect
tab of the browser developer tools.
You need to use different colors for the background and color of the active tab. Here I've changed the color of the active
tab to demonstrate the difference by the sx
prop of the Tabs
component and use the class selector to target the .Mui-selected
class of the active tab.
You can also use the textColor
prop of the tabs to use the secondary color for the tab text.
<Tabs
// textColor="secondary"
value={value}
onChange={handleChange}
sx={{
marginLeft: "auto",
"&& .Mui-selected": { // && are used to increase the specificity
color: "#d1d1d1"
}
}}
>
I've created sandbox out of your example code.
Upvotes: 2