В панели приложений с кнопками материал-интерфейс / ядро: v3.9.1 обрезка backgroundImage

Question

В панели приложений с кнопками material-ui / core ': v3.9.1 обрезка backgroundImage.

В панели приложения с кнопками материал-интерфейс / ядро: v3.0.3 все работало хорошо

Почему?Что можно поцарапать для работы как в v3.0.3.Мой код:

// https://material -ui.com / api / app-bar / (панель приложений с кнопками)

    import React from "react";
    import PropTypes from "prop-types";
    import { withStyles } from "@material-ui/core/styles";
    import AppBar from "@material-ui/core/AppBar";
    import Toolbar from "@material-ui/core/Toolbar";
    import Typography from "@material-ui/core/Typography";
    import Button from "@material-ui/core/Button";
    import IconButton from "@material-ui/core/IconButton";
    import { Link } from "react-router-dom";
    import MenuIcon from "@material-ui/icons/Menu";

    import logoRa from "../assets/images/all/SunRa48.png";

    const styles = {
      root: {
        flexGrow: 1,
      },
      grow: {
        flexGrow: 1,
      },
      menuButton: {
        marginLeft: -12,
        marginRight: 20,
      },
      logo: {
        backgroundImage: `url(${logoRa})`,
        backgroundSize: 45,
        backgroundPosition: "2px 2px",
        backgroundRepeat: "no-repeat",
        borderRadius: "0%",
        marginRight: 10,
      },
    };

    function ButtonAppBar(props) {
      const { classes } = props;
      return (
        <div className={classes.root}>
          <AppBar position="static">
            <Toolbar>
              <IconButton className={classes.menuButton} color="inherit" aria-label="Menu">
                <MenuIcon />
              </IconButton>
              <IconButton className={classes.logo} component={Link} to="/aboutme" title="AboutMe" aria-label="logo" />
              <Typography variant="h6" color="inherit" className={classes.grow}>
                News
              </Typography>
              <Button color="inherit">Login</Button>
            </Toolbar>
          </AppBar>
        </div>
      );
    }

    ButtonAppBar.propTypes = {
      classes: PropTypes.object.isRequired,
    };
export default withStyles(styles)(ButtonAppBar);

Answer 1

До версии 3.1.0 IconButton имел явную ширину и высоту 48 пикселей.

В версии 3.1.0 они были удалены для поддержки более гибкого определения размера IconButton.Поскольку вы делаете свой логотип в качестве фонового изображения, его размер уменьшился.

Вы можете восстановить старое поведение, добавив ширину и высоту в свой класс логотипа:

  logo: {
    backgroundImage: `url(${logoRa})`,
    backgroundSize: 45,
    backgroundPosition: "2px 2px",
    backgroundRepeat: "no-repeat",
    borderRadius: "0%",
    marginRight: 10,
    width: 48, // added
    height: 48 // added
  }