reactjs - 在带有按钮的 App Bar 中 material-ui / core ': v3.9.1 裁剪背景图片

Question

在带有按钮的 App Bar 中 material-ui / core ': v3.9.1 裁剪背景图像。

在带有按钮 material-ui / core ': v3.0.3 的 App Bar 中一切正常

为什么？什么可以像在 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);

标签： reactjsmaterial-ui

Answer 1

在 3.1.0 版本之前，IconButton具有 48px 的显式宽度和高度。

在 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
  }