移动视图上的CSS图标按钮半脱离屏幕

我能够使搜索栏保持在搜索栏的右侧。当然不是强制性的。我可以在搜索栏的右侧。这是用于以下内容的gitHub链接：

我尝试的是一种输入方法。可在此处找到此代码：

从“React”导入React；
从'@material ui/core/styles'导入{makeStyles}；
从“道具类型”导入道具类型；
从“@material ui/icons/Search”导入SearchIcon；
进口{
网格，
MenuItem，
TextField，
FormControl，
纸张
IconButton，
盒子，
排版，
绝妙的，
}来自“@material ui/core”；
const useStyles=makeStyles（（主题）=>({
根目录：{
溢出：“可见”，
maxWidth:'785px'，
填充：0，
玛金托普：“10雷姆”，
marginLeft:'自动'，
marginRight:“自动”，
},
卡片：{
填充：主题。间距（2,4,2,4），
backgroundColor:theme.palette.background.default，
},
输入：{
fontSize:'1.6rem'，
'& > *': {
fontSize:“1.6rem！重要”，
颜色：theme.palette.text.default，
},
},
标题：{
填充：0，
marginBottom：主题。间距（2），
背景色：theme.palete.primary.main，
},
h1：{
显示：“块”，
过渡：“所有线性350ms”，
重量：600，
颜色：theme.palete.text.secondary，
[theme.breakpoints.between（'xs'，'sm'）：{
fontSize:'3rem'，
},
[主题.breakpoints.between（'md'，'lg'）：{
fontSize:'4rem'，
},
[theme.breakpoints.up（'xl'）：{
fontSize:'5rem'，
},
},
图标按钮：{
背景色：theme.palete.secondary.main，
“&：悬停”：{
背景色：theme.palete.secondary.dark，
},
“&*>.MuiSvgIcon根”：{
fontSize:'2rem'，
颜色：theme.palete.text.primary，
},
保证金：0，
边缘光：主题。间距（-1.45），
底部：主题。间距（-2），
浮动：'对'，
marginBottom：主题。间距（-5.5），
[主题.breakpoints.only（'xs'）]：{
marginTop：主题。间距（6），
marginRight：主题。间距（-8），
},
},
选择控件：{
'& > *': {
fontSize:'1.2rem'，
textTransform:'大写'，
颜色：theme.palete.primary.main，
},
},
选择项目：{
fontSize:'1.4rem'，
textTransform:'大写'，
颜色：theme.palete.primary.main，
},
}));
功能自定义数据库（道具）{
const classes=useStyles（）；
const{searchText，onChangeHandler，onFilterChangeHandler，filter，onFormSubmit}=props；
常量onFilterChange=（事件）=>{
onFilterChangeHandler（event.target.value）；
};
const onTextChange=（事件）=>{
onChangeHandler（event.target.value）；
};
const onSubmit=（事件）=>{
event.preventDefault（）；
onFormSubmit（）；
};
const searchOptions=['post'，'author']；
返回(
搜寻
onSubmit（事件）}aria label=“search”>
onFilterChange（事件）}
>
{searchOptions.map（（选项）=>(
{option}
))}
onTextChange（事件）}
/>
);
}
CustomizedInputBase.propTypes={
searchText:PropTypes.string，
onChangeHandler:PropTypes.func，
onFilterChangeHandler:PropTypes.func，
onFormSubmit:PropTypes.func，
过滤器：PropTypes.string，
};
导出默认自定义的putbase；

已解决！我的答案的解决方案。
从“React”导入React；
从“道具类型”导入道具类型；
从'@material ui/core/styles'导入{makeStyles}；
从“@material ui/icons/Search”导入SearchIcon；
从“@material ui/core/inputadornation”导入输入；
进口{
网格，
MenuItem，
TextField，
FormControl，
纸张
IconButton，
盒子，
排版，
}来自“@material ui/core”；
从“../SearchHelp”导入SearchHelp；
const useStyles=makeStyles（（主题）=>({
根目录：{
溢出：“可见”，
maxWidth:'785px'，
填充：0，
玛金托普：“10雷姆”，
marginLeft:'自动'，
marginRight:“自动”，
marginBottom：主题。间距（6），
},
卡片：{
填充：主题。间距（2,4,2,4），
backgroundColor:theme.palette.background.default，
},
标题：{
填充：0，
marginBottom：主题。间距（2），
背景色：theme.palete.primary.main，
},
h1：{
显示：“块”，
过渡：“所有线性350ms”，
重量：600，
颜色：theme.palete.text.secondary，
[theme.breakpoints.between（'xs'，'sm'）：{
fontSize:'3rem'，
},
[主题.breakpoints.between（'md'，'lg'）：{
fontSize:'4rem'，
},
[theme.breakpoints.up（'xl'）：{
fontSize:'5rem'，
},
},
图标按钮：{
背景色：theme.palete.secondary.main，
“&：悬停”：{
背景色：theme.palete.secondary.dark，
},
“&*>.MuiSvgIcon根”：{
fontSize:'2rem'，
颜色：theme.palette.primary.ContractText，
},
保证金：0，
位置：'相对'，
底部：主题。间距（6），
浮动：'对'，
marginBottom：主题。间距（-12），
},
选择控件：{
'& > *': {
fontSize:'1.2rem'，
textTransform:'大写'，
颜色：theme.palete.primary.main，
},
},
选择项目：{
fontSize:'1.4rem'，
textTransform:'大写'，
颜色：theme.palete.primary.main，
},
}));
功能自定义数据库（道具）{
const classes=useStyles（）；
const{text，onTextChange，onFilterChange，filter，onSubmit}=props；
const searchOptions=['post'，'author']；
返回(
搜寻
onFilterChange（event.target.value）}
import React from 'react';
import { makeStyles } from '@material-ui/core/styles';

import PropTypes from 'prop-types';
import SearchIcon from '@material-ui/icons/Search';

import {
  Grid,
  MenuItem,
  TextField,
  FormControl,
  Paper,
  IconButton,
  Box,
  Typography,
  Fab,
} from '@material-ui/core';

const useStyles = makeStyles((theme) => ({
  root: {
    overflow: 'visible',
    maxWidth: '785px',
    padding: 0,
    marginTop: '10rem',
    marginLeft: 'auto',
    marginRight: 'auto',
  },
  card: {
    padding: theme.spacing(2, 4, 2, 4),
    backgroundColor: theme.palette.background.default,
  },
  input: {
    fontSize: '1.6rem',
    '& > *': {
      fontSize: '1.6rem !important',
      color: theme.palette.text.default,
    },
  },
  header: {
    padding: 0,
    marginBottom: theme.spacing(2),
    backgroundColor: theme.palette.primary.main,
  },
  h1: {
    display: 'block',
    transition: 'all linear 350ms',
    fontWeight: 600,
    color: theme.palette.text.secondary,
    [theme.breakpoints.between('xs', 'sm')]: {
      fontSize: '3rem',
    },
    [theme.breakpoints.between('md', 'lg')]: {
      fontSize: '4rem',
    },
    [theme.breakpoints.up('xl')]: {
      fontSize: '5rem',
    },
  },
  iconButton: {
    backgroundColor: theme.palette.secondary.main,
    '&:hover': {
      backgroundColor: theme.palette.secondary.dark,
    },
    '& * > .MuiSvgIcon-root': {
      fontSize: '2rem',
      color: theme.palette.text.primary,
    },
    margin: 0,
    marginRight: theme.spacing(-1.45),
    bottom: theme.spacing(-2),
    float: 'right',
    marginBottom: theme.spacing(-5.5),
    [theme.breakpoints.only('xs')]: {
      marginTop: theme.spacing(6),
      marginRight: theme.spacing(-8),
    },
  },

  selectControl: {
    '& > *': {
      fontSize: '1.2rem',
      textTransform: 'capitalize',
      color: theme.palette.primary.main,
    },
  },
  selectItem: {
    fontSize: '1.4rem',
    textTransform: 'capitalize',
    color: theme.palette.primary.main,
  },
}));

function CustomizedInputBase(props) {
  const classes = useStyles();
  const { searchText, onChangeHandler, onFilterChangeHandler, filter, onFormSubmit } = props;

  const onFilterChange = (event) => {
    onFilterChangeHandler(event.target.value);
  };

  const onTextChange = (event) => {
    onChangeHandler(event.target.value);
  };

  const onSubmit = (event) => {
    event.preventDefault();
    onFormSubmit();
  };

  const searchOptions = ['post', 'author'];

  return (
    <Box className={classes.root} boxShadow={2}>
      <Paper component="form" className={classes.card} elevation={0}>
        <Grid
          container
          className={classes.header}
          direction="row"
          spacing={8}
          alignItems="center"
          justify="flex-start"
        >
          <Grid item xs={12}>
            <Typography variant="h1" className={classes.h1}>
              Search
            </Typography>
          </Grid>
        </Grid>
        <Fab size="large" className={classes.iconButton}>
          <FormControl>
            <IconButton type="submit" onClick={(event) => onSubmit(event)} aria-label="search">
              <SearchIcon />
            </IconButton>
          </FormControl>
        </Fab>
        <Grid container direction="row" spacing={2} alignItems="center" justify="flex-start">
          <Grid item xs={12} sm={2} lg={2}>
            <FormControl fullWidth={true}>
              <TextField
                id="standard-select-search-type"
                select
                label="Filter"
                value={filter}
                variant="outlined"
                className={classes.selectControl}
                onChange={(event) => onFilterChange(event)}
              >
                {searchOptions.map((option) => (
                  <MenuItem key={option} value={option} className={classes.selectItem}>
                    {option}
                  </MenuItem>
                ))}
              </TextField>
            </FormControl>
          </Grid>
          <Grid item xs={12} sm={10} lg={10}>
            <FormControl fullWidth={true}>
              <TextField
                className={classes.input}
                placeholder="How to Get Started in Open Source"
                inputProps={{ 'aria-label': 'search telescope' }}
                variant="outlined"
                value={searchText}
                onChange={(event) => onTextChange(event)}
              />
            </FormControl>
          </Grid>
        </Grid>
      </Paper>
    </Box>
  );
}

CustomizedInputBase.propTypes = {
  searchText: PropTypes.string,
  onChangeHandler: PropTypes.func,
  onFilterChangeHandler: PropTypes.func,
  onFormSubmit: PropTypes.func,
  filter: PropTypes.string,
};
export default CustomizedInputBase;

Solved! My solution to my answer.

import React from 'react';
import PropTypes from 'prop-types';
import { makeStyles } from '@material-ui/core/styles';
import SearchIcon from '@material-ui/icons/Search';
import InputAdornment from '@material-ui/core/InputAdornment';
import {
  Grid,
  MenuItem,
  TextField,
  FormControl,
  Paper,
  IconButton,
  Box,
  Typography,
} from '@material-ui/core';
import SearchHelp from '../SearchHelp';

const useStyles = makeStyles((theme) => ({
  root: {
    overflow: 'visible',
    maxWidth: '785px',
    padding: 0,
    marginTop: '10rem',
    marginLeft: 'auto',
    marginRight: 'auto',
    marginBottom: theme.spacing(6),
  },
  card: {
    padding: theme.spacing(2, 4, 2, 4),
    backgroundColor: theme.palette.background.default,
  },
  header: {
    padding: 0,
    marginBottom: theme.spacing(2),
    backgroundColor: theme.palette.primary.main,
  },
  h1: {
    display: 'block',
    transition: 'all linear 350ms',
    fontWeight: 600,
    color: theme.palette.text.secondary,
    [theme.breakpoints.between('xs', 'sm')]: {
      fontSize: '3rem',
    },
    [theme.breakpoints.between('md', 'lg')]: {
      fontSize: '4rem',
    },
    [theme.breakpoints.up('xl')]: {
      fontSize: '5rem',
    },
  },
  iconButton: {
    backgroundColor: theme.palette.secondary.main,
    '&:hover': {
      backgroundColor: theme.palette.secondary.dark,
    },
    '& * > .MuiSvgIcon-root': {
      fontSize: '2rem',
      color: theme.palette.primary.contrastText,
    },
    margin: 0,
    position: 'relative',
    bottom: theme.spacing(6),
    float: 'right',
    marginBottom: theme.spacing(-12),
  },
  selectControl: {
    '& > *': {
      fontSize: '1.2rem',
      textTransform: 'capitalize',
      color: theme.palette.primary.main,
    },
  },
  selectItem: {
    fontSize: '1.4rem',
    textTransform: 'capitalize',
    color: theme.palette.primary.main,
  },
}));

function CustomizedInputBase(props) {
  const classes = useStyles();
  const { text, onTextChange, onFilterChange, filter, onSubmit } = props;

  const searchOptions = ['post', 'author'];

  return (
    <Box className={classes.root} boxShadow={2}>
      <Paper component="form" className={classes.card} elevation={0}>
        <Grid
          container
          className={classes.header}
          direction="row"
          spacing={8}
          alignItems="center"
          justify="flex-start"
        >
          <Grid item>
            <Typography variant="h1" className={classes.h1}>
              Search
            </Typography>
          </Grid>
          <SearchHelp />
        </Grid>
        <Grid container direction="row" spacing={2} alignItems="center" justify="flex-start">
          <Grid item xs={12} sm={2} lg={2}>
            <FormControl fullWidth={true}>
              <TextField
                id="standard-select-search-type"
                select
                label="Filter"
                value={filter}
                variant="outlined"
                className={classes.selectControl}
                onChange={(event) => onFilterChange(event.target.value)}
              >
                {searchOptions.map((option) => (
                  <MenuItem key={option} value={option} className={classes.selectItem}>
                    {option}
                  </MenuItem>
                ))}
              </TextField>
            </FormControl>
          </Grid>
          <Grid item xs={12} sm={10} lg={10}>
            <FormControl fullWidth={true}>
              <TextField
                className={classes.input}
                placeholder="How to Get Started in Open Source"
                inputProps={{ 'aria-label': 'search telescope' }}
                variant="outlined"
                value={text}
                InputProps={{
                  endAdornment: (
                    <InputAdornment>
                      <IconButton type="submit" className={classes.iconButton} onClick={onSubmit}>
                        <SearchIcon />
                      </IconButton>
                    </InputAdornment>
                  ),
                }}
                onChange={(event) => onTextChange(event.target.value)}
              />
            </FormControl>
          </Grid>
        </Grid>
      </Paper>
    </Box>
  );
}

CustomizedInputBase.propTypes = {
  text: PropTypes.string,
  onTextChange: PropTypes.func,
  filter: PropTypes.string,
  onFilterChange: PropTypes.func,
  onSubmit: PropTypes.func,
};
export default CustomizedInputBase;