Блог

Я хотел бы расположить текст по центру кнопки Material-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>
  );
}
  

Можно переместить значки во внутренний 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);