使用图像选项卡而不是文本标签创建 Material-UI 选项卡

Question

我正在尝试使用 Material-ui 选项卡组件作为垂直选项卡。我遇到的问题是如何使用预定义图标以外的图像而不是文本标签？

我尝试使用 Avatar 组件，像这样破坏 Tab：

    <Tab label="Item Two" {...a11yProps(1)}>
      <Avatar alt="test avatar" src="/logo192.png" />
    </Tab>

当我将头像放入 TabPanel 中时，它会起作用，因此我知道它是正确的并正确指向图像，但是当我将其放入选项卡中时，如上所示，我没有得到任何图像，只有“项目二”标签。是否可以使用 ButtonBase 创建带有图像的选项卡？我找不到任何使用 ButtonBase 的示例。或者我现在需要提交功能请求并寻找其他地方吗？

Answer 1

我不完全确定这是否是您所要求的，但您可以通过该Tab icon属性传递您自己的图像以将它们用作图标。它们不必是 Material-UI 图标。

<Tab icon={<Avatar alt="test avatar" src="/logo192.png" />} />

<Tab icon={<Avatar alt="test avatar" src="/logo192.png" />} />

const {Tabs, Tab, Avatar} = MaterialUI;

function Demo() {
  const [selected, setSelected] = React.useState(0);

  return (
    <div style={{display: "flex"}}>
      <Tabs
        orientation="vertical"
        value={selected}
        onChange={(_, selected) => setSelected(selected)}
      >
        <Tab icon={<Avatar />} />
        <Tab label="second" />
      </Tabs>
      <div></div>
    </div>
  );
}

ReactDOM.render(<Demo />, document.querySelector("#root"));