Question

在我的一个项目中，我一直在使用 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/

Answer 1

您可以将此添加到您的 root

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

此外，您可能希望将其添加到您的 inputRoot 中，这样它就不会落在小屏幕上的下拉菜单下方

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

材质 UI 自动完成：更改 inputRoot 和 input

1 个答案: