Material ui Autocomplete endInputAdornment 自定义元素未居中答案

【问题标题】：Material ui Autocomplete endInputAdornment custom elements not centeredMaterial ui Autocomplete endInputAdornment 自定义元素未居中
【发布时间】：2021-11-23 21:49:17
【问题描述】：

当使用variant='filled' 设置材质ui <Autocomplete /> 时，endInputAdornments 不会以自动完成为中心。

Codesandbox 有两种变体供参考

<Autocomplete
    disablePortal
    id="combo-box-demo"
    options={top100Films}
    sx={{ width: 300, mt: 2 }}
    renderInput={(params) => (
      <TextField
        {...params}
        label="Movie"
        variant="filled" //With filled it does not center anymore
        InputProps={{
          ...params.InputProps,
          endAdornment: (
            <React.Fragment>
              {params.InputProps.endAdornment}
              <IconButton
                color="primary"
                aria-label="upload picture"
                component="span"
              >
                <PhotoCamera />
              </IconButton>
            </React.Fragment>
          )
        }}
      />

我找到了github issue，他们在内部为 inputProps 修复了它，但我似乎无法找到一种方法来对我自己的装饰元素做同样的事情。

似乎相关的唯一道具是 popupIcon，但我仍然想要该默认功能。我只是希望能够在 endInputAdornments 中添加更多 IconButtons

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

您可以使用<div> 而不是<React.Fragment> 来设置图标容器的样式：

              endAdornment: (
                <div style={{ marginTop: "-19px" }}>
                  {params.InputProps.endAdornment}
                  <IconButton
                    color="primary"
                    aria-label="upload picture"
                    component="div"
                  >
                    <PhotoCamera />
                  </IconButton>
                </div>
              )

这是sandbox link

为什么是-19px？因为使用variant="filled"，文本和图标的容器向下移动了19px：

【讨论】：

这可能是最好的解决方法，对于未来的人们使用 material-ui 中的而不是
（如果你想要多个自定义装饰元素）

【解决方案2】：

Autocomplete 的弹出图标由于this 样式而垂直居中。您可以通过稍微修改源中的样式来添加自己的样式以使其旁边的图标居中：

<Autocomplete
  options={top100Films}
  renderInput={(params) => (
    <TextField
      {...params}
      label="Movie"
      variant="filled"
      InputProps={{
        ...params.InputProps,
        sx: {
          // this is necessary if you don't want to input value to be
          // placed under the icon at the end
          '&&&': { pr: '70px' },
        },
        endAdornment: (
          <React.Fragment>
            {params.InputProps.endAdornment}
            <IconButton
              color="primary"
              sx={{
                position: 'absolute',
                p: 0,
                right: 40,
                top: 'calc(50% - 12px)', // Center vertically
              }}
            >
              <PhotoCamera />
            </IconButton>
          </React.Fragment>
        ),
      }}
    />
  )}
/>

【讨论】：