在Material UI中调整组件的大小而不会变形

努诺·奥利维拉（Nuno Oliveira）

我一直在尝试从材料UI调整选择组件的大小。遇到的问题是以下事实：我无法在className属性的帮助下正确调整组件的大小，标签不在正确的位置，并且选择阴影的高度大于我调整大小的选择框的高度（高度： 24px）。这是我尝试的：

<FormControl variant="outlined" className={classes.formControl}>
    <InputLabel id="demo-simple-select-outlined-label">Age</InputLabel>
    <Select
        labelId="demo-simple-select-outlined-label"
        id="demo-simple-select-outlined"
        value={age}
        onChange={handleChange}
        label="Age"
        className={classes.MuiSelect}

    >
        <MenuItem value="">
            <em>None</em>
        </MenuItem>
        <MenuItem value={10}>Ten</MenuItem>
        <MenuItem value={20}>Twenty</MenuItem>
        <MenuItem value={30}>Thirty</MenuItem>
    </Select>
</FormControl>

这是我使用的makestyle：

const useStyles = makeStyles((theme: Theme) =>
    createStyles({
        formControl: {
            margin: theme.spacing(1),
            minWidth: 120,
        },
        selectEmpty: {
            marginTop: theme.spacing(2),
        },
        MuiSelect: {

            width: "338px",
            height: "24px"

        }
    }),
);

带有示例的沙箱链接：codesandbox

最终，结果如下：

带有标签的包装盒在错误的位置

选择的阴影大于实际框

阿里·萨萨尼

更改选择元素的大小后，还应修改.MuiInputLabel-outlined相关InputLabel元素的，以及MuiSelect-outlined将选择框的阴影调整为其宽度和高度沙盒

首先，请将这些outlined和selectOutlined对象添加到useStyles

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    formControl: {
      margin: theme.spacing(1),
      minWidth: 120
    },
    selectEmpty: {
      marginTop: theme.spacing(2)
    },
    MuiSelect: {
      width: "338px",
      height: "24px"
    },
    outlined: {
      transform: "translate(4px, 3px)"
    },
    selectOutlined: {
      padding: "0px 14px"
    }
  })
);

然后将它们添加到InputLabel和Select元素

<FormControl variant="outlined" className={classes.formControl}>
        <InputLabel
          className={classes.outlined}
          id="demo-simple-select-outlined-label"
        >
          Age
        </InputLabel>
        <Select
          labelId="demo-simple-select-outlined-label"
          id="demo-simple-select-outlined"
          value={age}
          onChange={handleChange}
          label="Age"
          classes={{
            root: classes.MuiSelect,
            outlined: classes.selectOutlined
          }}
        >
          <MenuItem value="">
            <em>None</em>
          </MenuItem>
          <MenuItem value={10}>Ten</MenuItem>
          <MenuItem value={20}>Twenty</MenuItem>
          <MenuItem value={30}>Thirty</MenuItem>
        </Select>
      </FormControl>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。