Блог

Я пытаюсь установить поле выбора Mui таким же широким, как его самый большой элемент меню. Я пытался использовать autoWidth prop при выборе, но это, похоже, ничего не меняет. Вот изолированная среда кода, показывающая проблему (я также включил реализацию текстового поля, которая имеет ту же проблему для меня);

https://codesandbox.io/s/mui-select-width-issue-xmsp5?file=/src/App.js

При выборе между 2 элементами ширина поля выбора изменится. Как мне программно исправить, чтобы он был шириной самого большого элемента меню? Спасибо

Вы пробовали добавлять fullWidth свойство в компонент textfield? попробуйте указать контейнер желаемой ширины, и ввод будет занимать всю ширину его контейнера. или вы можете переопределить ширину текстового поля, используя стиль в тексте. как в следующем:

 <TextField select style = {{width: 200}}>
        <MenuItem key="1" value="1">
          Small Choice
        </MenuItem>
        <MenuItem key="2" value="2">
          Biiiiiiiiiiiiiiiiiiiiiig Choice
        </MenuItem>
</TextField>
  

это решение не самое лучшее, потому что вы должны статически указывать максимальную ширину текстового поля в соответствии с вашим пунктом меню.