材质UI中心按钮文本忽略图标

Question

我想在一个材料UI按钮中居中文本，以便文本居中，而不管它旁边的图标。目前，图标包括在居中。

演示中的顶部两个按钮显示了它目前的外观，我正在寻找文本，因为它在底部两个按钮中出现。这些按钮的前后分别带有图标，而不影响按钮的文字。

最后两个是期望输出

https://codesandbox.io/s/material-demo-forked-tj8ko?file=/demo.js

import React from "react";
import Button from "@material-ui/core/Button";
import { makeStyles } from "@material-ui/core/styles";
import KeyboardArrowRightIcon from "@material-ui/icons/KeyboardArrowRight";
import KeyboardArrowLeftIcon from "@material-ui/icons/KeyboardArrowLeft";

const useStyles = makeStyles((theme) => ({
  button: {
    width: "100%",
    marginBottom: theme.spacing(1),
    marginTop: theme.spacing(1)
  }
}));

export default function IconLabelButtons() {
  const classes = useStyles();

  return (
    <div>
      <Button
        variant="contained"
        color="secondary"
        className={classes.button}
        startIcon={<KeyboardArrowLeftIcon />}
      >
        Back
      </Button>
      {/* This Button uses a Font Icon, see the installation instructions in the Icon component docs. */}
      <Button
        variant="contained"
        color="primary"
        className={classes.button}
        endIcon={<KeyboardArrowRightIcon />}
      >
        Forward
      </Button>
      <Button variant="contained" color="secondary" className={classes.button}>
        Back
      </Button>
      {/* This Button uses a Font Icon, see the installation instructions in the Icon component docs. */}
      <Button variant="contained" color="primary" className={classes.button}>
        Forward
      </Button>
    </div>
  );
}

Answer 1

可以将图标移动到按钮的内部html中，并分别调整边距。这有点奇怪，但解决了你的问题。我把你的演示和更新分叉了：https://codesandbox.io/s/material-demo-forked-xmltd?file=/demo.js

  <Button variant="contained" color="secondary" className={classes.button}>
    <KeyboardArrowLeftIcon style={{ marginLeft: -28 }} />
    Back
  </Button>
  <Button variant="contained" color="primary" className={classes.button}>
    Forward
    <KeyboardArrowRightIcon style={{ marginRight: -28 }} />
  </Button>

您可以在仍然使用startIcon和endIcon时获得相同的效果，方法是使用withStyles自定义开始/结束图标的样式，然后使用生成的自定义组件：

const CenteredTextButton = withStyles({
  startIcon: {
    marginLeft: -28
  },
  endIcon: {
    marginRight: -28
  }
})(Button);