Как центрировать опции в автозаполнении MUI и обернуть их в рамку?

Вопрос или проблема

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="Выбрать"
            {...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>
  );
};

Ответ или решение

Для того чтобы центрировать элементы в выпадающем списке компонента Autocomplete от Material-UI (MUI) и обернуть каждый элемент в рамку, необходимо внести несколько изменений в ваш код. Я предлагаю вам следующее решение:

1. Создать кастомный компонент Paper: Этот компонент будет содержать стили для обертки элементов списка.
2. Использовать кастомный компонент для опций: При помощи renderOption, в котором вы сможете определить стиль для каждой опции, включая центрирование и рамку.

Вот как должен выглядеть ваш обновленный код:

import React, { useState, ReactElement } from 'react';
import { Autocomplete } from '@mui/material';
import { TextField, Stack, Paper } from '@mui/material';
import { styled } from '@mui/material/styles';
import { autocompleteClasses } from '@mui/material/Autocomplete';

const CustomPaper = styled(Paper)({
  border: '1px solid #ccc', // Укажите желаемый стиль рамки
});

const CustomOption = styled('li')(({ theme }) => ({
  display: 'flex',
  justifyContent: 'center',
  alignItems: 'center',
  padding: theme.spacing(1),
  border: '1px solid #ccc', // Указываем стиль рамки для каждой опции
  margin: theme.spacing(0.5, 0),
  borderRadius: 4,
  '&:hover': {
    backgroundColor: theme.palette.action.hover,
  },
}));

const PlacementCell = ({ value, placements, notAvailable = false, readOnly = false }) => {
  const [selectedPlacement, setSelectedPlacement] = useState(value || placements[0]);

  const handlePlacementChange = (event, newValue) => {
    if (newValue !== null) {
      setSelectedPlacement(newValue);
    }
  };

  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',
            }}
          />
        )}
        renderOption={(props, option) => (
          <CustomOption {...props}>
            {option.placementName}
          </CustomOption>
        )}
        PaperComponent={CustomPaper}
        fullWidth
        disableClearable
        onChange={handlePlacementChange}
      />
    </Stack>
  );
};

export default PlacementCell;

Объяснение изменений:

1. CustomPaper: Добавлен кастомный компонент Paper для задания стилей обертки.
2. CustomOption: Создан кастомный компонент опции, который центрирует текст, добавляет отступы и рамку.
3. renderOption: Использован для рендеринга каждой опции с помощью вашего кастомного компонента.

Теперь ваши элементы будут иметь правильно центрированный текст и обрамление. Не забудьте заменить border на нужный вам стиль рамки, если необходимо.

Надеюсь, это поможет решить вашу задачу!