如何使用 Material UI 在 Appbar 右侧设置图标答案

【问题标题】：How to set icons on the right side of an Appbar using material UI如何使用 Material UI 在 Appbar 右侧设置图标
【发布时间】：2019-07-30 06:33:36
【问题描述】：

我正在尝试制作 Appbar 组件。我在左侧有一个菜单图标和公司名称。现在我想在 Appbar 组件的最右侧显示配置文件图标、通知图标和欢迎字符串。

我使用了带有 margin-left:auto 属性的 div 标签，但我希望它使用网格组件来完成。

import React, { Component } from "react";
import Appbar from "@material-ui/core/AppBar";
import { Toolbar, IconButton, Typography, Avatar, Grid } from "@material-ui/core";
import Menu from "@material-ui/icons/Menu";
import Notify from "@material-ui/icons/Notifications";
export class Appbar_component extends Component {
    render() {
        return (
            //static position keeps the appbar at the top 
            <Grid container>

                <Appbar position='static'
                    style={{
                        backgroundColor: "rgba(74, 144, 226, 1)"
                    }}
                >
                    <Toolbar>
                        <Grid item>
                            {/* all the conreols that are at the left side */}
                            <IconButton edge="start" color="inherit">
                                <Menu />
                            </IconButton>
                        </Grid>
                        <Grid item>

                            <Typography variant="h6" color="inherit" style={{ marginLeft: '40px' }}>
                                <b>
                                    Cetra Business Travel
                        </b>
                            </Typography>
                        </Grid>
                        {/* controls that are at the right side */}
                        <div
                            style={{
                                marginLeft: "auto",
                            }}
                        >
                            <Grid item>
                                <Typography variant='title'>Welcome User!</Typography>
                            </Grid>
                            <Grid item>

                                <IconButton color="inherit" >
                                    <Notify />
                                </IconButton>
                            </Grid>
                            <Grid item>

                                <IconButton>
                                    <Avatar src='./Images/profile_image.png' si />
                                </IconButton>
                            </Grid>
                        </div>
                    </Toolbar>
                </Appbar>
            </Grid>
        );
    }
}

export default Appbar;

当我使用网格组件时，它会更改布局，以便只有 Appbar 右侧的图标和字符串显示在不同的行中，我希望它位于同一行（并排）

【问题讨论】：

为此使用 Grid 组件的动机是什么？为什么要避免使用 div 解决方案？
我想使用网格组件的 xs 和 lg 属性来提供响应式视图。还有其他方法可以提供吗？还是会为我提供响应式视图？

标签： reactjs material-ui

【解决方案1】：

除了使用带有 margin-left: auto 的 div 之外，您还可以在带有标签的 Grid 项目和带有用户信息的 Grid 项目之间添加另一个 Grid 项目。

<Grid item xs/>

xs 告诉 Grid 项目使用 Grid 容器中所有剩余的 Grid 空间

看看this code sandbox sample

【讨论】：

【解决方案2】：

您可以在欢迎字符串和配置文件图标之间创建一个 Grid 容器，然后使用 justify 属性将项目与右端对齐。

           <Grid container justify="flex-end">
              <Grid item>
                <Typography variant="title">Welcome User!</Typography>
              </Grid>
              <Grid item>
                <IconButton color="inherit">
                  <Notify />
                </IconButton>
              </Grid>
              <Grid item>
                <IconButton>
                  <Avatar src="./Images/profile_image.png" />
                </IconButton>
              </Grid>
            </Grid>

【讨论】：