带有 InputBase 的图标按钮答案

【问题标题】：Icon button with InputBase带有 InputBase 的图标按钮
【发布时间】：2021-10-19 08:58:24
【问题描述】：

我是 MUI/react 的新手，我一直在尝试在我的输入基本表单旁边放置一个图标按钮，但是我正在努力做到这一点，以便输入表单占用我搜索中的所有可用空间分区。相反，我的搜索图标包装器占据了大部分空间。我真的很困惑我做错了什么，有人可以帮我解释一下吗？

这是我的代码：

import * as React from "react";
import { styled } from "@mui/material/styles";
import Box from "@mui/material/Box";
import InputBase from "@mui/material/InputBase";
import SearchIcon from "@mui/icons-material/Search";
import IconButton from "@mui/material/IconButton";

const Search = styled("div")(({ theme }) => ({
  display: "flex",
  position: "relative",
  borderRadius: 30,
  backgroundColor: "#ffffff",
  border: "1px",
  borderStyle: "solid",
  borderColor: "#55597d",
  // marginLeft: 10,
  width: "auto",
  ".MuiInputBase-root": {
    width: "100%",
  },
}));

const SearchIconWrapper = styled("div")(({ theme }) => ({
  padding: theme.spacing(0, 2),
  height: "100%",
  // position: 'absolute',
  // pointerEvents: 'none',
  display: "flex",
  alignItems: "center",
  justifyContent: "flex-end",
  // backgroundColor: 'black',
  width: "100%",
}));

const StyledInputBase = styled(InputBase)(({ theme }) => ({
  color: "inherit",
  "& .MuiInputBase-input": {
    padding: theme.spacing(1, 1, 1, 0),
    // vertical padding + font size from searchIcon
    paddingLeft: `calc(1em + ${theme.spacing(0)})`,
    paddingRight: `calc(1em + ${theme.spacing(4)})`,
    transition: theme.transitions.create("width"),
    width: "100%",
  },
}));

export default function SearchAppBar({
  searchQuery,
  setSearchQuery,
  clearGenre,
  onDropDownChange,
}) {
  return (
    <Box sx={{ flexGrow: 1 }}>
      <Search
        sx={{
          width: { xs: "90vw", md: "50vw", lg: "30vw" },
          margin: "auto",
          marginBottom: "20px",
        }}
      >
        <form action="/" method="get">
          <StyledInputBase
            defaultValue={searchQuery}
                // placeholder="Search All Games…"
            inputProps={{ "aria-label": "search" }}
            type="search"
            name="s"
            id="site-search"
          />
        </form>
        <SearchIconWrapper>
          <IconButton>
            <SearchIcon style={{ color: "#55597d" }} />
          </IconButton>
        </SearchIconWrapper>
      </Search>
    </Box>
  );
}

【问题讨论】：

标签： css reactjs material-ui

【解决方案1】：

您需要先删除右侧SearchIconWrapper中的width: 100%。并且因为Search 组件是一个弹性容器，你还需要将flexGrow: 1 添加到第一个孩子（表单），以便它可以扩展以适应父级并将图标推到最右边：

const Search = styled("div")(({ theme }) => ({
  display: "flex",
  position: "relative",
  borderRadius: 30,
  backgroundColor: "#ffffff",
  border: "1px",
  borderStyle: "solid",
  borderColor: "#55597d",
  // marginLeft: 10,
  // ---------------------------------- add the following styles
  "& :first-child": {
    flexGrow: 1
  }
  width: "auto",
  ".MuiInputBase-root": {
    width: "100%"
  }
}));

const SearchIconWrapper = styled("div")(({ theme }) => ({
  padding: theme.spacing(0, 2),
  height: "100%",
  // position: 'absolute',
  // pointerEvents: 'none',
  display: "flex",
  alignItems: "center",
  justifyContent: "flex-end"
  // backgroundColor: 'black',
  // -----------------------------------> comment this line: width: "100%"
}));

【讨论】：