如何将 MUI 自动完成选项居中并将它们包裹在边框中？

Question

我需要将 MUI 自动完成的选项居中，但我尝试了很多方法，但仍然失败。我还需要将每个选项包裹在边框中。 我尝试将其添加到 inputProps 和样式纸组件中，但它不起作用 这是我到目前为止的代码：

const PlacementCell = ({ value, placements, notAvailable = false, readOnly = false }: PlacementCellProps): ReactElement => {
  const { palette, spacing } = useTheme();
  const [selectedPlacement, setSelectedPlacement] = useState<Placement | undefined>(value || placements[0]);

  const handlePlacementChange = (event: React.SyntheticEvent, newValue: Placement | null) => {
    if (newValue !== null) {
      setSelectedPlacement(newValue);
    }
  };

const CustomListbox = styled('ul')({
  [`& .${autocompleteClasses.option}`]: {
    display: 'flex',
    justifyContent: 'center',
  },
});

  return (
    <Stack
      direction="row"
      height={1}
      alignItems="center"
      spacing={2}
      justifyContent="space-between"
    >
      <Autocomplete
        options={placements}
        getOptionLabel={(option) => option.placementName}
        renderInput={(params) => (
          <TextField
            placeholder="Select"
            {...params}
            InputProps={{
          ...params.InputProps,
          disableUnderline: true,
            }}
            inputProps={{
              ...params.inputProps,
              style: { textAlign: 'center' },
            }}
            sx={{
              [`& .${autocompleteClasses.inputRoot} .MuiInput-input`]: {
                padding: '12px',
              },
              variant: 'bodySmall.default',
              [`& .${autocompleteClasses.popupIndicator}`]: {
                right: 12,
                ['&:hover']: {
                backgroundColor: 'transparent',
                },
              },
            }}
          />
        )}
        // PaperComponent={CustomPaper}
        fullWidth
        disableClearable
        onChange={handlePlacementChange}
      />
    </Stack>
  );
};

这是我必须显示的图像

感谢您的任何建议！

Answer 1

您应该在

slotProps

上使用

Autocomplete

，如下所述： https://stackoverflow.com/a/78267213/11184255

所以看起来会是这样的

<Autocomplete
...
  slotProps={{
    paper: {
      sx: {
        '& .MuiAutocomplete-listbox': {
          '& .MuiAutocomplete-option': {
            display: 'flex',
            justifyContent: 'center',
            border: '1px solid lightgray',
            margin: '5px'
          },
        },
      },
    },
  }}
/>