3

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;

1 Answer 1

2

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.

3
  • thank you! It solved the issue. Have a great day. Thanks Sep 26, 2021 at 17:44
  • 1
    Great. Thanks, you too! Sep 26, 2021 at 17:47
  • I was facing a similar issue, and I was able to solve it by using this answer. thank you so much for taking the time to answer this question. Mar 30, 2023 at 22:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.