如何让 Material-UI 输入字段填充工具栏答案

【问题标题】：How to let Material-UI input field fill toolbar如何让 Material-UI 输入字段填充工具栏
【发布时间】：2020-03-31 23:28:34
【问题描述】：

我正在努力让 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 徽标消失。

所需结果的图像：

【问题讨论】：

标签： javascript html css reactjs material-ui

【解决方案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
  },
},

【讨论】：

这使搜索栏确实变大了，但使 material-ui 徽标难以辨认。我想要的是材料 ui 标志仍然清晰易读（没有省略号）。
@Keida 已更新，如果解决了您的问题，请点赞