时间戳

首页 > 解决方案 > 在 Material UI 中调整组件大小而不变形

css - 在 Material UI 中调整组件大小而不变形

问题描述

我一直在尝试从材质 UI 调整选择组件的大小。出现的问题是我无法在 className 属性的帮助下正确调整组件的大小，标签不在正确的位置，并且选择阴影高度大于我调整大小的选择框的高度（高度： 24 像素）。这是我尝试过的：

<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>

这是我使用的makestyles：

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

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

        }
    }),
);

带有示例的沙箱链接：codesandbox

最后，结果如下：

带有标签的盒子在错误的地方

选择的阴影比实际框大

标签： cssreactjsmaterial-uifrontendreact-typescript

解决方案

由于您更改了选择元素的大小，您还应该修改.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"
    }
  })
);

然后将它们添加到InputLabelandSelect元素中

<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>

推荐阅读