Блог

Я пытался изменить размер выбранного компонента из пользовательского интерфейса material. Возникшая проблема заключалась в том, что я не мог правильно изменить размер компонента с помощью свойства 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>
 

И это были те стили, которые я использовал:

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