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

Question

我正在使用 material ui 创建标签，我想在标签 (ex: 05 written beside Recommendation label) 旁边添加值，这将在标签组件中动态显示，如下图所示：

这是我的 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

一种选择是创建您自己的组件，将其作为选项卡传入 label，然后根据需要设置样式。例如：

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>}
/>

我创建了一个快速（无样式）示例来说明解决方案：https://codesandbox.io/s/basictabs-material-demo-forked-i9543?file=/demo.js

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

Add dynamic value beside label in Material UI React Tabs Component

tabs

reactjs

material-ui