Блог

Я новичок в 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",
  "amp; .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>
  );
}
 

Сначала вам нужно удалить width: 100% надпись SearchIconWrapper справа. И поскольку Search компонент является контейнером flex, вам также необходимо добавить 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
  "amp; :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%"
}));