Material UI Autocomplete：更改 inputRoot 和 input 之间的边距答案

【问题标题】：Material UI Autocomplete: change margin between inputRoot and inputMaterial UI Autocomplete：更改 inputRoot 和 input 之间的边距
【发布时间】：2021-06-05 13:21:42
【问题描述】：

在我的一个项目中，我一直在使用 Material-UI 的自动完成功能。尽管这个组件对调整大小不是很友好，但我已经成功地改变了一些宽度/高度和字体大小。但是，当我调整视口大小时，我现在无法处理 inputRoot 和 input 之间的巨大余量，如下图所示。我已经搜索了文档，但找不到可以更改的属性，以便能够使用 vw 单位调整此边距，这将允许它按照我想要的方式调整大小。一些图片来说明我的问题。正如你所看到的，当我缩小视口时，红色和绿色空间也会缩小，但由于边距（用粉色线表示）保持不变，它看起来相对要大得多。我也希望它缩小。：


import React from 'react';
import TextField from '@material-ui/core/TextField';
import Autocomplete from '@material-ui/lab/Autocomplete';
import { makeStyles , withStyles } from '@material-ui/core/styles';

const useStyles = makeStyles({
    input: {
        width: "100%",
        height: "1.4vw",
        fontFamily: 'Montserrat',
        fontSize: "1.25vw",
        color: "#02112E",
        backgroundColor: "red",
    },
    option: {
      fontSize: "0.8vw",
      fontFamily: 'Montserrat',
      height: "3vw",
      width: "100%",
      color: "#02112E",
    },
    noOption: {
      fontSize: "0.8vw",
      fontFamily: 'Montserrat',
      height: "1.2vw",
      width: "100%",
      color: "#02112E"
    },
    root: {
      '& label.Mui-focused': {
        color: '#00ff00',
        fontSize: "0.97vw",
        height: "1vw",
      },
      '& .MuiInput-underline:after': {
        borderBottomColor: '#02112E',
        borderBottomWidth: "0.21vw"
      },
      '& .MuiInput-underline:before': {
        borderBottomColor: '#02112E',
        borderBottomWidth: "0.07vw"
      },
      '& .MuiInput-underline:hover::before': {
        borderBottomColor: '#02112E',
        borderBottomWidth: "0.07vw"
      },
      fontSize: "1.25vw",
      width: "100%",
    },
    inputRoot: {
      color: "#02112E",
      fontFamily: 'Montserrat',
      fontSize: "1.25vw",
      backgroundColor: "green",
    }
  });

  
  
  export default function CountrySelect() {
    const classes = useStyles();
  
    return (
      <Autocomplete
        style={{ width: "60%", height: "3.47vw" }}
        options={list}
        classes={{
          root: classes.root,
          option: classes.option,
          noOptions: classes.noOption,
          input: classes.input
        }}
        disableClearable
        freeSolo
        noOptionsText={'Sem Opções'}
        autoHighlight
        getOptionLabel={(option) => option.title}
        renderOption={(option) => (
          <React.Fragment>
            {option.title}
          </React.Fragment>
        )}
        renderInput={(params) => (
          <TextField
            {...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://2y3jh.csb.app/

【问题讨论】：

这是您的演示：94xlp.csb.app 我会说不要使用视口宽度作为高度，因为当您缩小浏览器时，比例会有所不同。但您也可以结合媒体查询来使用适当的视口宽度。
这并不能解决我的问题...我想更改 inputRoot 和 input 之间的边距，但在您发送给我的代码上我没有看到任何解决方案。
不，我的意思是你需要在这里向人们展示你的演示。不只是代码，没有看到你的演示，别人怎么能调试。这就是我在这里添加它的原因。
2y3jh.csb.app

标签： css reactjs autocomplete material-ui margin

【解决方案1】：

您可以将此添加到您的root

"& label + .MuiInput-formControl":{
  marginTop:"1vw"
},

此外，您可能希望将此添加到您的 inputRoot，这样它就不会低于小屏幕上的下拉列表

transform: "translate(0, 2vw) scale(1)"

【讨论】：