如何居中对齐Material UI Autocomplete中的Chip项

要实现Chip项居中，关键是覆盖Autocomplete内部输入容器的默认样式，以下是可行方案：

方案一：自定义类名覆盖样式 #

通过makeStyles（或styled）创建自定义样式，直接修改Autocomplete输入容器的布局：

import { makeStyles } from '@material-ui/core/styles';
import Autocomplete from '@material-ui/lab/Autocomplete';
import Chip from '@material-ui/core/Chip';
import TextField from '@material-ui/core/TextField';

const useStyles = makeStyles({
  inputRoot: {
    '& .MuiAutocomplete-inputRoot': {
      display: 'flex',
      justifyContent: 'center',
      flexWrap: 'wrap',
    },
    // 可选：调整Chip之间的间距
    '& .MuiChip-root': {
      margin: '0 4px 4px 0',
    }
  }
});

function CenteredChipAutocomplete() {
  const classes = useStyles();
  const options = ["Option 1", "Option 2", "Option 3"];

  return (
    <Autocomplete
      multiple
      classes={{ inputRoot: classes.inputRoot }}
      options={options}
      renderTags={(value, getTagProps) =>
        value.map((option, index) => (
          <Chip key={index} label={option} {...getTagProps({ index })} />
        ))
      }
      renderInput={(params) => <TextField {...params} label="Centered Chips" />}
    />
  );
}

方案二：用Box组件包裹并穿透样式 #

如果坚持用Box组件，需要让样式穿透到Autocomplete的内部容器：

import Box from '@material-ui/core/Box';
import Autocomplete from '@material-ui/lab/Autocomplete';
import Chip from '@material-ui/core/Chip';
import TextField from '@material-ui/core/TextField';

function CenteredChipAutocomplete() {
  const options = ["Option 1", "Option 2", "Option 3"];

  return (
    <Box sx={{
      '& .MuiAutocomplete-inputRoot': {
        display: 'flex',
        justifyContent: 'center',
        flexWrap: 'wrap',
      }
    }}>
      <Autocomplete
        multiple
        options={options}
        renderTags={(value, getTagProps) =>
          value.map((option, index) => (
            <Chip key={index} label={option} {...getTagProps({ index })} />
          ))
        }
        renderInput={(params) => <TextField {...params} label="Centered Chips" />}
      />
    </Box>
  );
}

核心原理 #

Autocomplete的输入区域默认是左对齐的flex布局容器，只需将其justifyContent设置为center，同时保留flexWrap: wrap确保多行Chip也能居中排列。之前的Box样式未生效，是因为没有精准覆盖到Autocomplete内部的inputRoot容器样式。

内容的提问来源于stack exchange，提问作者Ricardo Hernandez