Material UI 自动完成边距调整问题

如何解决Material UI 自动完成边距调整问题

我有以下问题。我在我的项目中使用 Material-UI Autocomplete。我做了一些改动，以便在视口改变大小时调整字体和组件的大小。因此，我在宽度、高度和字体大小上使用了 vw。然而，正如你在下面的 gif 中看到的，当我调整绿色酱汁和蓝色/红色空间之间的差距时，它会增加。我怎样才能确保差距也遵循初始比例？所以基本上我想要的是整个组件缩小并且差距没有增加。我一直在改变各种高度/边距，但我似乎无法解决这个问题。您可以在以下沙箱中获得所有代码。

https://2y3jh.csb.app

解决方法

您需要将输入高度更改为 3vw，以便高度一致。

import TextField from "@material-ui/core/TextField";
import Autocomplete from "@material-ui/lab/Autocomplete";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles({
  input: {
    width: "100%",height: "3vw",// Changed from 2vw
    fontSize: "1.25vw",color: "#02112E",backgroundColor: "green"
  },option: {
    fontSize: "0.8vw",width: "100%",color: "#02112E"
  },noOption: {
    fontSize: "0.8vw",root: {
    "& label + .MuiInput-formControl": {
      marginTop: "1vw"
    },"& label.Mui-focused": {
      color: "#02112E",fontSize: "0.97vw"
    },"& .MuiInput-underline:after": {
      borderBottomColor: "#02112E",borderBottomWidth: "0.21vw",left: "0",transformOrigin: "left center",transition: "all 0.3s ease"
    },"& .MuiInput-underline:before": {
      borderBottomColor: "#02112E",borderBottomWidth: "0.07vw"
    },"& .MuiInput-underline:hover::before": {
      borderBottomColor: "#02112E",fontSize: "1.25vw",backgroundColor: "red"
  },inputRoot: {
    color: "#02112E",backgroundColor: "blue",transform: "translate(0,2vw) scale(1)"
  }
});

export default function StyledAutoComplete() {
  const classes = useStyles();

  return (
    <Autocomplete
      style={{ width: "60%" }}
      options={list}
      classes={{
        root: classes.root,option: classes.option,noOptions: classes.noOption,input: classes.input
      }}
      disableClearable
      freeSolo
      noOptionsText={"No Options"}
      autoHighlight
      getOptionLabel={(option) => option.title}
      renderOption={(option) => <React.Fragment>{option.title}</React.Fragment>}
      renderInput={(params) => (
        <TextField
          style={{ width: "100%" }}
          {...params}
          label="Option"
          variant="standard"
          inputProps={{
            ...params.inputProps,autoComplete: "new-password" // disable autocomplete and autofill
          }}
          InputLabelProps={{
            classes: {
              root: classes.inputRoot
            }
          }}
        />
      )}
    />
  );
}

const list = [{ title: "opt 1" },{ title: "opt 2" }];

演示： https://2zh36.csb.app/

输出：