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

Posted 2023-02-19

【中文标题】Material ui 5标签消失，点击时标签向左移动，点击的标签消失

【英文标题】：Material ui 5 tab disappearing, when clicking, the tabs move to the left and the clicked tab disappears

【发布时间】：2021-11-19 00:43:03

【问题描述】：

点击时标签消失，大部分代码来自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;

【参考方案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。

【讨论】：

谢谢！它解决了这个问题。祝你有美好的一天。谢谢

太棒了。谢谢你！