Question

虽然使用了Material UI中的选择，但我仍在努力使它们正确地使用高度和宽度（分别使用'vh'和'vw'）和使用'vh'的文本大小来正常工作。

我最终为这些盒子准备了适当的尺寸，但是由于显然使用“变换”将其自身从左上角偏移，因此标签文本不再居中。

无论如何，这就是我所拥有的： https://codesandbox.io/s/material-demo-ujz2g

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import InputLabel from "@material-ui/core/InputLabel";
import MenuItem from "@material-ui/core/MenuItem";
import FormHelperText from "@material-ui/core/FormHelperText";
import FormControl from "@material-ui/core/FormControl";
import Select from "@material-ui/core/Select";

const useStyles = makeStyles(theme => ({
  formControl: {
    margin: theme.spacing(1),
    width: "20vw"
  },
  selectEmpty: {
    marginTop: theme.spacing(2)
  },
  select: {
    height: "10vh"
  },
  inputLabel: {
    fontSize: "4vh",
    alignSelf: "center"
  }
}));

export default function SimpleSelect() {
  const classes = useStyles();
  const [age, setAge] = React.useState("");

  const inputLabel = React.useRef(null);
  const [labelWidth, setLabelWidth] = React.useState(0);
  React.useEffect(() => {
    setLabelWidth(inputLabel.current.offsetWidth);
  }, []);

  const handleChange = event => {
    setAge(event.target.value);
  };

  return (
    <div>
      <FormControl variant="outlined" className={classes.formControl}>
        <InputLabel
          className={classes.inputLabel}
          ref={inputLabel}
          id="demo-simple-select-outlined-label"
        >
          Age
        </InputLabel>
        <Select
          className={classes.select}
          labelId="demo-simple-select-outlined-label"
          id="demo-simple-select-outlined"
          value={age}
          onChange={handleChange}
          labelWidth={labelWidth}
        >
          <MenuItem value="">
            <em>None</em>
          </MenuItem>
          <MenuItem value={10}>Ten</MenuItem>
          <MenuItem value={20}>Twenty</MenuItem>
          <MenuItem value={30}>Thirty</MenuItem>
        </Select>
      </FormControl>
      <FormControl variant="filled" className={classes.formControl}>
        <InputLabel id="demo-simple-select-filled-label">Age</InputLabel>
        <Select
          labelId="demo-simple-select-filled-label"
          id="demo-simple-select-filled"
          value={age}
          onChange={handleChange}
        >
          <MenuItem value="">
            <em>None</em>
          </MenuItem>
          <MenuItem value={10}>Ten</MenuItem>
          <MenuItem value={20}>Twenty</MenuItem>
          <MenuItem value={30}>Thirty</MenuItem>
        </Select>
      </FormControl>
    </div>
  );
}

编辑：放大和缩小时，奇怪的行为特别明显-标签本身在下拉列表中移动。

Answer 1

尝试在 FormControl 上使用 size="small" 属性

<FormControl variant="filled" size="small">
    <InputLabel id="demo-simple-select-filled-label">Age</InputLabel>
    <Select
      labelId="demo-simple-select-filled-label"
      id="demo-simple-select-filled"
      value={age}
      onChange={handleChange}
    >
      <MenuItem value="">
        <em>None</em>
      </MenuItem>
      <MenuItem value={10}>Ten</MenuItem>
      <MenuItem value={20}>Twenty</MenuItem>
      <MenuItem value={30}>Thirty</MenuItem>
    </Select>
</FormControl>

Answer 2

与其手动声明 FormControl、InputLabel 和 Select 并将 size 道具传递给 FormControl，您应该创建一个 selectable TextField 和更改 TextField size 道具。

这与定义 Select 和 FormControl 相同，但集成度更好。这是一个最小的例子：

<TextField
  select
  size='small'
  SelectProps={{ value, onChange: handleChange }}
>
  {names.map((name) => (
    <MenuItem key={name} value={name}>
      {name}
    </MenuItem>
  ))}
</TextField>

现场演示

Answer 3

您需要创建文件mystyle.css并在其中添加以下条目。最后将mystyle.css导入您的demo.js。

.MuiInputLabel-outlined {
  transform: translate(12px, 14px) scale(1) !important;
}

.MuiInputLabel-outlined.MuiInputLabel-shrink {
  transform: translate(12px, -6px) scale(0.75) !important;
}

工作演示：link

材质UI选择-选择大小

3 个答案:

现场演示