Reactjs 使用Material ui设计类似于Google新闻的appBar

我正在使用MaterialUI和React js开发一个类似于google新闻appBar的appBar。到目前为止，我已经安排了所有必需的组件，但我面临一些问题：

当搜索栏处于活动状态时，我希望其背景颜色变为白色

我不知道如何在搜索栏中加入这个下拉列表

如何将搜索栏与中心对齐

目前的结果是这样的

我想做到这样,

用于布局的组件如下所示：

import React, {useCallback} from 'react';
import clsx from 'clsx';
import { makeStyles, useTheme } from '@material-ui/core/styles';
import Drawer from '@material-ui/core/Drawer';
import CssBaseline from '@material-ui/core/CssBaseline';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import List from '@material-ui/core/List';
import Typography from '@material-ui/core/Typography';
import Divider from '@material-ui/core/Divider';
import IconButton from '@material-ui/core/IconButton';
import MenuIcon from '@material-ui/icons/Menu';
import SearchIcon from '@material-ui/icons/Search';
import {MenuItem1} from "./menu";
import {menu} from "./menuitems";
import {
  Switch,
  Route,
  BrowserRouter as Router
}from 'react-router-dom';
import InputBase from "@material-ui/core/InputBase";
import {Box, Button, fade} from "@material-ui/core";
import {CustomizedButton} from "./Button";
import {Login} from "../auth/Login";

const drawerWidth = 260;

const useStyles = makeStyles((theme) => ({
  root: {
    display: 'flex',
    flexGrow: 1,
  },
  appBar: {
    zIndex: theme.zIndex.drawer + 2,
    transition: theme.transitions.create(['width', 'margin'], {
      easing: theme.transitions.easing.sharp,
      duration: theme.transitions.duration.leavingScreen,
    }),
    width: '100%',
    backgroundColor: 'white',
  },
  menuButton: {
    marginRight: theme.spacing(2),
  },
  hide: {
    display: 'none',
  },
  drawer: {
    width: drawerWidth,
    flexShrink: 0,
  },
  drawerPaper: {
    width: drawerWidth,
  },
  drawerHeader: {
    display: 'flex',
    alignItems: 'center',
    padding: theme.spacing(0, 1),
    // necessary for content to be below app bar
    ...theme.mixins.toolbar,
    justifyContent: 'flex-end',
  },
  content: {
    flexGrow: 1,
    padding: theme.spacing(3),
    transition: theme.transitions.create('margin', {
      easing: theme.transitions.easing.sharp,
      duration: theme.transitions.duration.leavingScreen,
    }),
    marginLeft: -drawerWidth,
  },
  contentShift: {
    transition: theme.transitions.create('margin', {
      easing: theme.transitions.easing.easeOut,
      duration: theme.transitions.duration.enteringScreen,
    }),
    marginLeft: 0,
  },
  search: {
    position: 'relative',
    borderRadius: '0.5rem',
    float: 'right',
    backgroundColor: fade(theme.palette.grey[500], 0.15),
    '&:hover': {
      backgroundColor: fade(theme.palette.grey[500], 0.25),
    },
    '&:focus': {
          backgroundColor: theme.palette.common.white,
        },
    marginRight: theme.spacing(2),
    marginLeft: 0,
    width: '100%',
    [theme.breakpoints.up('sm')]: {
      marginLeft: theme.spacing(10),
      width: 'auto',
    },
    [theme.breakpoints.down('sm')]: {
      display: 'none'
    },
  },
  searchIcon: {
    padding: theme.spacing(0, 2),
    height: '100%',
    position: 'absolute',
    pointerEvents: 'none',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
  },
  inputRoot: {
    color: 'inherit',
  },
  inputInput: {
    padding: theme.spacing(1.75, 1.75, 1.75, 0),
    // vertical padding + font size from searchIcon
    paddingLeft: `calc(1em + ${theme.spacing(5)}px)`,
    transition: theme.transitions.create('width'),
    width: 'auto',
  },
}));

export const Layout = () => {
  const classes = useStyles();
  const theme = useTheme();
  const [open, setOpen] = React.useState(false);

  const toggle = useCallback(
    () => setOpen(!open),
    [open],
  );

  return (
    <div className={classes.root}>
      <Router>
      <CssBaseline />
      <AppBar
        position="fixed"
        className={classes.appBar}
      >
        <Toolbar>
          <IconButton
            color="inherit"
            aria-label="open drawer"
            onClick={toggle}
            edge="start"
            className={clsx(classes.menuButton, {
              [classes.open]: !open,
            })}
            style={{color: '#132743'}}
          >
            <MenuIcon />
          </IconButton>
          <Typography variant="h6"
                      style={{color: '#2196f3', fontSize: '1.75rem'}}
                      noWrap
          >
              MySite
          </Typography>

          <Box className={classes.root} width='50%' style={{display: 'space-between'}}>
            <div className={classes.search}>
            <div className={classes.searchIcon}>
              <SearchIcon style={{color: '#616161'}} />
            </div>
            <InputBase
              placeholder="Search…"
              classes={{
                root: classes.inputRoot,
                input: classes.inputInput,
              }}
              inputProps={{ 'aria-label': 'search' }}
              style={{color: '#616161'}}
            />
          </div>
          </Box>
          <div>
            {/*{isLoggedIn ? <Profile /> : <Button variant='contained' color='primary'>Login</Button>}*/}
            <div>
              <CustomizedButton text={'Login'}/>
            </div>
          </div>
        </Toolbar>
      </AppBar>
      <Drawer
        className={classes.drawer}
        variant="persistent"
        anchor="left"
        open={open}
        classes={{
          paper: classes.drawerPaper,
        }}
      >
        <div className={classes.drawerHeader}>
          <IconButton onClick={toggle} />
        </div>
        <Divider />
        <List>
          {menu.map((item, key) => <MenuItem1 key={key} item={item} />)}
        </List>
      </Drawer>
      <main
        className={clsx(classes.content, {
          [classes.contentShift]: open,
        })}
      >
        <div className={classes.drawerHeader} />
        <Typography paragraph>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
          ut labore et dolore magna aliqua. Rhoncus dolor purus non enim praesent elementum
          facilisis leo vel. Risus at ultrices mi tempus imperdiet. Semper risus in hendrerit
          gravida rutrum quisque non tellus. Convallis convallis tellus id interdum velit laoreet id
          donec ultrices. Odio morbi quis commodo odio aenean sed adipiscing. Amet nisl suscipit
          adipiscing bibendum est ultricies integer quis. Cursus euismod quis viverra nibh cras.
          Metus vulputate eu scelerisque felis imperdiet proin fermentum leo. Mauris commodo quis
          imperdiet massa tincidunt. Cras tincidunt lobortis feugiat vivamus at augue. At augue eget
          arcu dictum varius duis at consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem
          donec massa sapien faucibus et molestie ac.
        </Typography>
        <Typography paragraph>
          Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper eget nulla
          facilisi etiam dignissim diam. Pulvinar elementum integer enim neque volutpat ac
          tincidunt. Ornare suspendisse sed nisi lacus sed viverra tellus. Purus sit amet volutpat
          consequat mauris. Elementum eu facilisis sed odio morbi. Euismod lacinia at quis risus sed
          vulputate odio. Morbi tincidunt ornare massa eget egestas purus viverra accumsan in. In
          hendrerit gravida rutrum quisque non tellus orci ac. Pellentesque nec nam aliquam sem et
          tortor. Habitant morbi tristique senectus et. Adipiscing elit duis tristique sollicitudin
          nibh sit. Ornare aenean euismod elementum nisi quis eleifend. Commodo viverra maecenas
          accumsan lacus vel facilisis. Nulla posuere sollicitudin aliquam ultrices sagittis orci a.
        </Typography>
      </main>
      </Router>
    </div>
  );
}

import React，{useCallback}来自“React”；
从“clsx”导入clsx；
从“@materialui/core/styles”导入{makeStyles，useTheme}；
从“@material ui/core/Drawer”导入抽屉；
从“@material ui/core/CssBaseline”导入CssBaseline；
从“@material ui/core/AppBar”导入AppBar；
从“@material ui/core/Toolbar”导入工具栏；
从“@material ui/core/List”导入列表；
从“@material ui/core/Typography”导入排版；
从“@material ui/core/Divider”导入分隔器；
从“@material ui/core/IconButton”导入IconButton；
从“@material ui/icons/Menu”导入菜单图标；
从“@material ui/icons/Search”导入SearchIcon；
从“/menu”导入{MenuItem1}；
从“/menuitems”导入{menu}；
进口{
转换
路线,，
浏览器路由器作为路由器
}从“反应路由器dom”；
从“@material ui/core/InputBase”导入InputBase；
从“@material ui/core”导入{Box，Button，fade}”；
从“/Button”导入{CustomizedButton}；
从“./auth/Login”导入{Login}；
常数抽屉宽度=260；
const useStyles=makeStyles（（主题）=>({
根目录：{
显示：“flex”，
flexGrow:1，
},
appBar：{
zIndex:theme.zIndex.drawer+2，
transition:theme.transitions.create（['width'，'margin']{
放松：主题。过渡。放松。尖锐，
持续时间：theme.transitions.duration.leavingScreen，
}),
宽度：“100%”，
背景颜色：“白色”，
},
菜单按钮：{
边缘光：主题。间距（2），
},
隐藏：{
显示：“无”，
},
出票人：{
宽度：抽屉宽度，
flexShrink:0，
},
抽屉纸：{
宽度：抽屉宽度，
},
抽屉阅读器：{
显示：“flex”，
对齐项目：“居中”，
填充：主题。间距（0，1），
//内容必须位于应用程序栏下方
…theme.mixins.toolbar，
justifyContent:“柔性端”，
},
内容：{
flexGrow:1，
填充：主题。间距（3），
过渡：theme.transitions.create（'margin'{
放松：主题。过渡。放松。尖锐，
持续时间：theme.transitions.duration.leavingScreen，
}),
边缘左侧：-抽屉宽度，
},
contentShift：{
过渡：theme.transitions.create（'margin'{
放松：theme.transitions.easing.easeOut，
持续时间：theme.transitions.duration.enteringScreen，
}),
marginLeft:0，
},
搜索：{
位置：'相对'，
边界半径：“0.5雷姆”，
浮动：'对'，
背景色：褪色（主题.调色板.灰色[500]，0.15），
“&：悬停”：{
背景色：淡入淡出（主题.调色板.灰色[500]，0.25），
},
“&：焦点”：{
背景色：theme.palette.common.white，
},
边缘光：主题。间距（2），
marginLeft:0，
宽度：“100%”，
[theme.breakpoints.up（'sm'）：{
边缘左侧：主题。间距（10），
宽度：“自动”，
},
[theme.breakpoints.down（'sm'）：{
显示：“无”
},
},
搜索图标：{
填充：主题。间距（0,2），
高度：“100%”，
位置：'绝对'，
pointerEvents:'无'，
显示：“flex”，
对齐项目：“居中”，
为内容辩护：“中心”，
},
输入根：{
颜色：“继承”，
},
输入输出：{
填充：主题。间距（1.75,1.75,1.75,0），
//搜索图标的垂直填充+字体大小
paddingLeft:`calc（1em+${theme.spating（5）}px）`，
transition:theme.transitions.create（'width'），
宽度：“自动”，
},
}));
导出常量布局=（）=>{
const classes=useStyles（）；
const theme=useTheme（）；
const[open，setOpen]=React.useState（false）；
const toggle=useCallback(
（）=>setOpen（！open），
[公开]，
);
返回(
麦斯特
{/*{isLoggedIn？:Login}*/}
{menu.map（（项，键）=>）}
Lorem ipsum dolor sit amet，是一位杰出的职业经理人，他是一位临时雇员
我们的劳动和财富是巨大的，我们的财富是不可替代的
设施为利奥·维勒·里苏斯（ultrices mi tempus imperdiet）。亨德雷特（hendrerit）的森佩尔·里苏斯（Semper Risus）
妊娠期芸香属非黄花芸香，黄花芸香属黄花芸香属，黄花芸香属，黄花芸香属，黄花芸香属，黄花芸香属，黄花芸香属，黄花芸香属，黄花芸香属，黄花芸香属，黄花芸香属
多奈克·尤里塞斯。奥迪奥·莫尔比·奎斯·奥迪奥·埃尼安·阿梅特·尼塞尔·苏西比特
这是一个不可数的整数，它是一个可以活下去的整数。
狮子座狮子座狮子座狮子座狮子座狮子座狮子座狮子座狮子座狮子座狮子座狮子座狮子座狮子座狮子座狮子座狮子座狮子座狮子座狮子座狮子座狮子座狮子座狮子座狮子座狮子座狮子座狮子座狮子座狮子座狮子座狮子座狮子座狮子座狮子座狮子座狮子座狮子座
在奥古斯都，在奥古斯都，在奥古斯都，在奥古斯都，在奥古斯都
在圣殿里，人们用各种各样的口头禅来表达自己的心声
donec massa sapien faucibus et molestie ac。
毛里斯·努克（mauris nunc）委员会的研究结果表明，这是一种生活方式
肺动脉直径为1/2的尊严设施
tincidunt。Ornare suspendisse sed nisi lacus sed viverra tellus。Purus坐在阿梅特·帕特的座位上
莫里斯会议。莫尔比会议上的欧盟设施元素。莫里斯会议上的拉齐尼亚会议
秃鹫——死亡之神——或是死亡之神