CODEWITHSUNDEEP
javascriptreactjsmaterial-ui
Diego Franco
Diego Franco

Reputation: 73

Material ui 5 tab disappearing, when clicking, the tabs move to the left and the clicked tab disappears

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: 1452

Answers (1)

Junaid Faryad
Junaid Faryad

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

Related Questions