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

В App Bar с кнопками 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);
Спасибо за ответ. Вот код на CodeSandbox. Но плохо работает с последней версией Material-UI codeandbox.io/s/kxp3n93k5 Что-то не могу установить на CodeSandbox Material-UI v3.0.3. чтобы показать, что он работает правильно на этой версии





До версии 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
}
Большое Вам спасибо. Что-то не пробовал эти свойства
Если это решило вашу проблему. Пожалуйста, «примите» ответ. Если вы не знаете, как это сделать, вы можете найти инструкции здесь.
Было бы полезно, если бы вы могли включить CodeSandbox, который воспроизводит это.