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