仅在选择时显示文本 - MUI

Question

我只想在选择时显示选项卡的文本。 这来自 MUI 文档。如何仅在选择时显示标签？我假设我可以使用下面的状态并以某种方式翻译它，颜色如何与元素一起出现。

请查看我尝试建立的代码。我是这个框架的新手。如果有人可以提供提示，请告诉我！

function TabPanel(props) {
    const { children, value, index, ...other } = props;
  
    return (
      <div
        role="tabpanel"
        hidden={value !== index}
        id={`vertical-tabpanel-${index}`}
        aria-labelledby={`vertical-tab-${index}`}
        {...other}
      >
        {value === index && (
          <Box sx={{ p: 3 }}>
            <Typography>{children}</Typography>
          </Box>
        )}
      </div>
    );
  }
  
  TabPanel.propTypes = {
    children: PropTypes.node,
    index: PropTypes.number.isRequired,
    value: PropTypes.number.isRequired,
  };
  
  function a11yProps(index) {
    return {
      id: `vertical-tab-${index}`,
      'aria-controls': `vertical-tabpanel-${index}`,
    };
  }

//

const JobPostBuild = () => {
    const [value, setValue] = React.useState(0);

    const handleChange = (event, newValue) => {
      setValue(newValue);
    };
  
    return (
      <Box
        sx={{ flexGrow: 1, bgcolor: 'gray', display: 'flex', height: 500 }} 
      >
       <Tabs
        orientation="vertical"
        variant="scrollable"
        centered
        value={value}
        onChange={handleChange}
        sx={{ borderRight: 1, borderColor: 'divider' }}
      >
        <Tab icon={<WorkIcon/>} label={"Role"} {...a11yProps(0)} />
        <Tab icon={<AccountBoxIcon/>} label="People" {...a11yProps(1)} />
        <Tab icon={<ViewCompactIcon/>} label="Build" {...a11yProps(2)} />
        <Tab icon={<PostAddIcon/>} label="Post" {...a11yProps(3)} />

      </Tabs>

      <TabPanel value={value} index={0}>
        Role
      </TabPanel>
      <TabPanel value={value} index={1}>
        People
      </TabPanel>
      <TabPanel value={value} index={2}>
        Build
      </TabPanel>
      <TabPanel value={value} index={3}>
        Post
      </TabPanel>

    </Box>
    );
  }

export default JobPostBuild

很高兴通过 Discord 讨论这个问题，请告诉我！

Answer 1

您可以查看选中标签的value来设置标签标签的显示条件：

<Tab label={value === 0 ? "Role" : ""} {...a11yProps(0)} />

Demo