Material ui自动完成endInputAdornment自定义元素未居中_material-ui自动完成自定义值_Material-ui自动完成:指定自定义CloseIconButton - 腾讯云开发者社区

基础概念

Material-UI 是一个流行的 React UI 框架，提供了丰富的组件和样式，帮助开发者快速构建现代化的 Web 应用。Autocomplete 组件是 Material-UI 中用于实现自动完成功能的组件。endInputAdornment 属性允许你在输入框的末尾添加自定义元素。

类型

Autocomplete 组件的 endInputAdornment 属性接受一个 React 元素或一个返回 React 元素的函数。

应用场景

在需要实现自动完成功能的场景中，可以使用 Autocomplete 组件，例如搜索框、标签选择等。

问题描述

在使用 Material-UI 的 Autocomplete 组件时，endInputAdornment 自定义元素未居中。

原因

endInputAdornment 自定义元素未居中的原因可能是由于样式问题，特别是对齐方式没有正确设置。

解决方案

可以通过以下几种方式解决：

方法一：使用 CSS 样式

import React from 'react';
import { Autocomplete, TextField } from '@mui/material';
import './App.css';

const App = () => {
  return (
    <Autocomplete
      options={['Option 1', 'Option 2', 'Option 3']}
      renderInput={(params) => (
        <TextField
          {...params}
          variant="outlined"
          InputProps={{
            endAdornment: (
              <div className="custom-adornment">
                🔍
              </div>
            ),
          }}
        />
      )}
    />
  );
};

export default App;

在 App.css 中添加样式：

.custom-adornment {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

方法二：使用 `makeStyles` 和 `useStyles`

import React from 'react';
import { Autocomplete, TextField, makeStyles } from '@mui/material';

const useStyles = makeStyles({
  adornment: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    height: '100%',
  },
});

const App = () => {
  const classes = useStyles();

  return (
    <Autocomplete
      options={['Option 1', 'Option 2', 'Option 3']}
      renderInput={(params) => (
        <TextField
          {...params}
          variant="outlined"
          InputProps={{
            endAdornment: (
              <div className={classes.adornment}>
                🔍
              </div>
            ),
          }}
        />
      )}
    />
  );
};

export default App;