Question

在应用程序栏中带有按钮material-ui / core'：v3.9.1裁剪backgroundImage。

在带有按钮material-ui / core'的应用栏中，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
  }

在带有按钮的“应用程序栏”中，material-ui / core'：v3.9.1裁剪backgroundImage

1 个答案: