在 Material UI React Tabs 组件中的标签旁边添加动态值

Question

我正在使用材料 ui 创建选项卡，我想在标签旁边添加值(ex: 05 written beside Recommendation label)<\/code> ，这将在选项卡组件中是动态的，如下图所示：

这是我的 Tabs 组件的代码片段：

    <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
      <Tabs value={value} onChange={handleChange} aria-label="basic tabs example">
         <Tab label="Recommendation" />
         <Tab label="Ongoing" />
         <Tab label="Completed" />
      </Tabs>
   </Box>

Answer 1

一种选择是创建自己的组件，将其作为 Tab label<\/code>传入，然后根据需要设置样式。 例如：

const TabWithCount = ({ children, count }) => {
  return (
    <Box sx={{ display: "inline-flex", alignItems: "center" }}>
      <Typography component="div">{children}</Typography>
      {count ? (
        <Typography
          component="div"
          variant="body2"
          sx={{ marginLeft: "0.5rem" }}
        >
          {count}
        </Typography>
      ) : null}
    </Box>
  );
};

...

<Tab
  label={<TabWithCount count="05">Recommendation</TabWithCount>}
/>