Material UI 自动完成:更改 inputRoot 和 input 之间的边距
Material UI Autocomplete: change margin between inputRoot and input
在我的一个项目中,我一直在使用 Material-UI 的自动完成功能。尽管这个组件调整大小不是很友好,但我已经成功地改变了一些宽度's/height' 和字体大小。但是,当我调整视口大小时,我现在不得不处理 inputRoot 和 input 之间的巨大余量,如下图所示。我已经搜索了文档,但无法找到我可以更改哪个属性以便能够使用 vw 单位调整此边距的大小,这将允许它按我想要的方式调整大小。一些图像来说明我的问题。正如您所看到的,当我缩小视口时,红色和绿色 space 也会缩小,但由于边距(用粉红色线表示)保持不变,它看起来相对更大。我也想让它缩小。 :
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'},
];
演示:
您可以将此添加到您的 root
"& label + .MuiInput-formControl":{
marginTop:"1vw"
},
您可能还想将此添加到 inputRoot
,这样它就不会在小屏幕上低于下拉菜单
transform: "translate(0, 2vw) scale(1)"
在我的一个项目中,我一直在使用 Material-UI 的自动完成功能。尽管这个组件调整大小不是很友好,但我已经成功地改变了一些宽度's/height' 和字体大小。但是,当我调整视口大小时,我现在不得不处理 inputRoot 和 input 之间的巨大余量,如下图所示。我已经搜索了文档,但无法找到我可以更改哪个属性以便能够使用 vw 单位调整此边距的大小,这将允许它按我想要的方式调整大小。一些图像来说明我的问题。正如您所看到的,当我缩小视口时,红色和绿色 space 也会缩小,但由于边距(用粉红色线表示)保持不变,它看起来相对更大。我也想让它缩小。 :
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'},
];
演示:
您可以将此添加到您的 root
"& label + .MuiInput-formControl":{
marginTop:"1vw"
},
您可能还想将此添加到 inputRoot
,这样它就不会在小屏幕上低于下拉菜单
transform: "translate(0, 2vw) scale(1)"