Как сделать так, чтобы поле ввода Material-UI заполняло панель инструментов

Question

Я изо всех сил пытаюсь заставить пример панели приложения material-ui работать так, как мне бы хотелось. Codesandbox (с веб-сайта Material-UI).

То, что я пытаюсь достичь:

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

Что я пробовал:

Я попытался использовать flexGrow: 1 следующим образом, что лишь немного увеличивает панель поиска (не до конца):

search: {
  position: 'relative',
  borderRadius: theme.shape.borderRadius,
  backgroundColor: fade(theme.palette.common.white, 0.15),
  '&:hover': {
    backgroundColor: fade(theme.palette.common.white, 0.25),
},
marginRight: theme.spacing(2),
marginLeft: 0,
width: '100%',
[theme.breakpoints.up('sm')]: {
  marginLeft: theme.spacing(3),
  width: 'auto',
  flexGrow:1
},}

Я также попытался установить width: '100%' вместо 'width: auto', но это приводит к исчезновению Material-UI lo go.

Изображение желаемый результат:

Answer 1

Удалите width: 'auto' из вашего текущего кода,

Добавьте minWidth с заголовком

title: {
  display: 'none',
  minWidth: '120px',                 // Add
  [theme.breakpoints.up('sm')]: {
    display: 'block',
  },
},
search: {
  position: 'relative',
  borderRadius: theme.shape.borderRadius,
  backgroundColor: fade(theme.palette.common.white, 0.15),
  '&:hover': {
    backgroundColor: fade(theme.palette.common.white, 0.25),
  },
  marginRight: theme.spacing(2),
  marginLeft: 0,
  width: '100%',                     // Keep
  [theme.breakpoints.up('sm')]: {
    marginLeft: theme.spacing(3),
    // width: 'auto',                // Remove
  },
},