Material ui 5标签消失，点击时标签向左移动，点击的标签消失

Question

点击时标签消失，大部分代码来自material-ui docs。这里我使用的是material-ui 5。不明白为什么代码会这样。样式也来自 Material ui 5。这是一个简单的导航栏，有 5 个标签

import React, { useState } from 'react'; 从 '@mui/material' 导入 { AppBar, Toolbar, Tabs, Tab, useScrollTrigger, Box, Button }; 从“@mui/material/styles”导入 { styled }； 从'../../assets/logo.svg'导入标志；

const ElevationScroll = 道具 => { 常量 { 孩子 } = 道具；

      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;

Answer 1

标签感觉就像消失了一样，因为标签上的selected 类与tabs 的背景颜色相同。您可以在浏览器开发者工具的Inspect 选项卡中检查行为。

您需要为活动标签的背景和颜色使用不同的颜色。在这里，我更改了active 选项卡的颜色，以通过Tabs 组件的sx 属性来演示差异，并使用类选择器来定位活动选项卡的.Mui-selected 类。

您还可以使用标签的textColor prop 为标签文本使用辅助颜色。

<Tabs
  // textColor="secondary"
  value={value}
  onChange={handleChange}
  sx={{
    marginLeft: "auto",
    "&& .Mui-selected": { // && are used to increase the specificity
       color: "#d1d1d1"
    }
  }}
>

我已经根据您的示例代码创建了sandbox。