reactjs - Mui Tabs - 如何使用自定义图标

Question

我是 mui 新手，反应一般，我有 2 个问题。

1. 我正在尝试将我自己的 SVG 文件用作 mui 选项卡中的自定​​义图标，但无法弄清楚如何做到这一点（所有效果都与使用 mui 图标一样）。

我的代码：

import { ReactComponent as SecondIcon } from "../../images/tabs/secondTab.svg";
import { ReactComponent as ThirdIcon } from "../../images/tabs/thirdTab.svg";
import { ReactComponent as FourthIcon } from "../../images/tabs/fourthTab.svg";
import FirstTabSvg from "../../images/svg/FirstTabSvg";

const useStyles = makeStyles((theme) => ({
  root: {
    flexGrow: 1,
    maxWidth: 500,
    width: 80,
    alignItems: "center",
    display: "flex",
    flexDirection: "column",
  },
  margin: {
    padding: theme.spacing(2),
  },
  tab: {
    width: 80,
  },
  imageIcon: {
    height: '100%'
  },
  iconRoot: {
    textAlign: 'center'
  }
}));

export default function IconTabs() {
  const classes = useStyles();
  const [value, setValue] = React.useState(0);

  const handleChange = (event, newValue) => {
    setValue(newValue);
  };


  return (
    <Paper square className={classes.root}>
      <IconButton color="primary" size="small" className={classes.margin}>
        <LogoIcon />
      </IconButton>
      <Divider variant="middle" style={{ alignSelf: "stretch" }} />

      <Tabs
        value={value}
        onChange={handleChange}
        // variant="fullWidth"
        width="auto"
        indicatorColor="primary"
        textColor="primary"
        aria-label="icon tabs example"
        orientation="vertical"
      >
        <Tab icon={<FirstTabSvg />} aria-label="first" />
        <Tab icon={<SecondIcon />} aria-label="second" />
        <Tab icon={<ThirdIcon />} aria-label="third" />
        <Tab icon={<FourthIcon />} aria-label="fourth" />
      </Tabs>
    </Paper>
  );
}

我尝试了 2 个选项（使用 src 导入为 ReactComponent 和 SvgIcon）

FirstTabSvg.js（将其视为另一个问题的答案）：

import React from 'react';
import pure from 'recompose/pure';
import { SvgIcon } from '@material-ui/core';

let FirstTabSvg = (props) => (
  <SvgIcon {...props}>
    <img src="../tabs/firstTab.svg" />
  </SvgIcon>
);
FirstTabSvg = pure(FirstTabSvg);
FirstTabSvg.displayName = 'FirstTabSvg';
FirstTabSvg.muiName = 'SvgIcon';

export default FirstTabSvg;

结果：

标签

如您所见，FirstTabSvg不渲染，并且ReactComponent渲染但我不知道如何更改活动选项卡的颜色。

2. 如何更改标签宽度？正如您在图片中看到的，指示器与选项卡不在同一行

标签： reactjssvgtabsmaterial-ui