Я использую панель приложений Material-Ui и хочу просто расположить мой логотип и заголовок по центру (см. Рисунок).

enter image description here

Но я пробовал разные методы, все равно ничего не работает. Ниже приведен мой код. Вы знаете, что не так с моим кодом?

Вы также можете попробовать код в codeandbox:

https://codesandbox.io/s/material-ui-appbar-logo-7q80d?file=/src/MyAppBar.tsx:797-1455

Вот мои занятия:

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    root: {
      flexGrow: 1
    },
    menuButton: {
      marginRight: theme.spacing(2)
    },
    title: {
      flexGrow: 1,
      textAlign: "center"
    },
    logo: {
      maxWidth: 40,
      marginRight: '10px'
    }
  })
);

Вот мой код компонента:

export function ButtonAppBar() {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <AppBar position="static">
        <Toolbar>
          <IconButton
            edge="start"
            className={classes.menuButton}
            color="inherit"
            aria-label="menu"
          >
            <MenuIcon />
          </IconButton>
          <img src={logo} alt="Kitty Katty!" className={classes.logo} />
          <Typography variant="h6" className={classes.title}>
            Kitty Katty!
          </Typography>

          <Button color="inherit">Login</Button>
        </Toolbar>
      </AppBar>
    </div>
  );
}

Большое спасибо за помощь!

0
xirururu 14 Сен 2020 в 22:16

3 ответа

Лучший ответ

Попробуй это:

  <Typography variant="h6" className={classes.title}>
    <img src={logo} alt="Kitty Katty!" className={classes.logo} />
    Kitty Katty!
  </Typography>
1
Lazar Nikolic 14 Сен 2020 в 19:20
import React from "react";
import { createStyles, makeStyles, Theme } 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 MenuIcon from "@material-ui/icons/Menu";
import logo from "./images/logo.png";

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    root: {
      flexGrow: 1
    },
    menuButton: {
      marginRight: theme.spacing(2)
    },
    toolbar:{
      justifyContent:'space-between'
    },
    container:{
      display:'flex',
      alignItems:'center',
    },
    title: {
      flexGrow: 1,
      textAlign: "center"
    },
    logo: {
      maxWidth: 40,
      marginRight: '10px'
    }
  })
);

export function ButtonAppBar() {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <AppBar position="static">
        <Toolbar classes={{root:classes.toolbar}}>
          <IconButton
            edge="start"
            className={classes.menuButton}
            color="inherit"
            aria-label="menu"
          >
            <MenuIcon />
          </IconButton>
          <div className={classes.container}>
          <img src={logo} alt="Kitty Katty!" className={classes.logo} />
          <Typography variant="h6" className={classes.title}>
            Kitty Katty!
          </Typography>
          </div>
          <Button color="inherit">Login</Button>
        </Toolbar>
      </AppBar>
    </div>
  );
}
1
SaimumIslam27 14 Сен 2020 в 19:38
    <div className={classes.root}>
      <AppBar position="static">
        <Toolbar>
          <IconButton
            edge="start"
            className={classes.menuButton}
            color="inherit"
            aria-label="menu"
          >
            <MenuIcon />
          </IconButton>          
          <Typography variant="h6" className={classes.title} id="appBar">
            <img src={logo} alt="Kitty Katty!" className={classes.logo} /> 
            Kitty Katty!
          </Typography>

          <Button color="inherit">Login</Button>
        </Toolbar>
      </AppBar>
    </div>

Затем в свой style.css добавьте это

#appBar {
  display: flex;
  justify-content:  center;
  align-items: center;
}
1
Joshua Martinez 14 Сен 2020 в 19:40