使用SVG的自定义Material-UI按钮？

您可以在SvgIcon组件内部使用ButtonBase组件，如下所示：

const useStyles = makeStyles(theme => ({
  root: {
    ...theme.typography.button
  },
}));

const CustomSvgButton = props => {
  return (
    <SvgIcon {...props}>
      <rect x="0" y="0" width="200" height="100" /> // replace with your path(s)
      <text
        x="50%"
        y="50%"
        dominantBaseline="middle"
        textAnchor="middle"
        fill="white">
        {props.label}
      </text>
    </SvgIcon>
  );
};

// ...
const classes = useStyles();

<ButtonBase focusRipple className={classes.root}>
  <CustomSvgButton
    label="Submit"
    color="primary"
    style={{ width: 200, height: 100 }}
    viewBox="0 0 200 100"
  />
</ButtonBase>

我已将其rect用于演示目的，但您可以将其替换为svg的路径。

顶部的样式是可选的，但是这种方式使文本看起来像Typography组件。

更新资料

您也可以将svg作为组件导入，然后将其传递给componentprop，SvgIcon并使用以下方式将文本放在中间flexbox：

import { ReactComponent as YourSvgButton } from "./yoursvgpath.svg";

// ...

const useStyles = makeStyles(theme => ({
  root: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
  },
  label: {
    position: 'absolute',
    color: 'white',
  },
}));

// ...

const CustomSvgButton = props => {
  const classes = useStyles();
  return (
    <div className={classes.root}>
      <SvgIcon
        component={YourSvgButton}
        style={{ width: 200, height: 100 }}
        viewBox="0 0 200 100"
      />
      <Typography className={classes.label}>{props.label}</Typography>
    </div>
  );
};

// ...

<ButtonBase focusRipple>
  <CustomSvgButton label="Submit" />
</ButtonBase>

请注意，仅当您使用create-react-app时，这种方式才能将svg作为组件导入，因为create-react-app在后台使用SVGR（https://github.com/gregberge/svgr）。因此，如果您不使用create-react-app，则可以按照文档中所述使用webpack和SVGR将svg转换为React组件：https ://material-ui.com/components/icons/#component-prop 。