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

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

В App Bar с кнопками material-ui/core':v3.0.3 все работало хорошо

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

Почему? Что можно поцарапать, чтобы работало как в 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, который воспроизводит это.

Ryan Cogswell 29.01.2019 15:15

Спасибо за ответ. Вот код на CodeSandbox. Но плохо работает с последней версией Material-UI codeandbox.io/s/kxp3n93k5 Что-то не могу установить на CodeSandbox Material-UI v3.0.3. чтобы показать, что он работает правильно на этой версии

Роман 31.01.2019 14:44
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
1
2
51
1

Ответы 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
  }

Edit Material demo

Большое Вам спасибо. Что-то не пробовал эти свойства

Роман 01.02.2019 19:15

Если это решило вашу проблему. Пожалуйста, «примите» ответ. Если вы не знаете, как это сделать, вы можете найти инструкции здесь.

Ryan Cogswell 01.02.2019 19:18

Другие вопросы по теме