如何自定义 Material UI 自动完成下拉菜单

Question

我正在使用 Material UI v5 beta1 并且我一直在尝试自定义他们的自动完成组件，以便在选择项目时选项上的排版颜色从黑色变为白色，但是，我不知道如何通过它的风格。 到目前为止，我已经尝试通过样式组件或全局覆盖（参见附加代码）在.MuiAutocomplete-option 上传递我的样式，并尝试了我能想到的每个状态，悬停，选择，聚焦，甚至尝试了 Material 类，但没有其中有工作。我也尝试过使用带有 MenuList 的自定义 Popper，但没有运气。几天来，我一直在为此烦恼，并且无法检查 DOM 使事情变得更加困难，任何帮助或提示将不胜感激。 提前谢谢你。

MuiAutocomplete: {
    styleOverrides: {
        root: {
           // ...
        },
        option: {
            padding: '5px 12px',
            backgroundColor: theme.palette.background.paper,
            display: 'flex',
            height: 42,
            borderRadius: theme.borderRadius.s,

            '&:hover': {
                backgroundColor: theme.palette.action.hover,
                '& .Mui-Typography-root': { color: theme.palette.text.contrast },
            },

            '& .Mui-selected': {
                backgroundColor: theme.palette.action.hover,
                '& .Mui-Typography-root': { color: theme.palette.text.contrast },
            },

            '&.disabled': {
                opacity: 0.5,
                '& .Mui-Typography-root': {
                    color: theme.palette.text.disabled,
                },
            },
        },

renderOption={(props, option) => {
    return (
        <li {...props}>
            <Box display={'flex'} flexDirection={'row'}>
                <Avatar size={'32'} variant={'circular'} />
                <Box display={'flex'} ml={3} flexDirection={'column'}>
                    <Typography color={'text.primary'}>
                        {option.label}
                    </Typography>
                    <Typography color={'text.secondary'}>
                        Extra Information
                    </Typography>
                </Box>
            </Box>
        </li>
    );
}}

Answer 1

我会将{ selected } 传递给您的renderOption，然后使用它来切换您的内联样式

例如：

renderOption={(props, option, { selected }) => {
    return (
        <li {...props}>
            <Box display={'flex'} flexDirection={'row'} style={{ backgroundColor: selected ? 'red' : 'green' }}>
                <Avatar size={'32'} variant={'circular'} />
                <Box display={'flex'} ml={3} flexDirection={'column'}>
                    <Typography color={'text.primary'}>
                        {option.label}
                    </Typography>
                    <Typography color={'text.secondary'}>
                        Extra Information
                    </Typography>
                </Box>
            </Box>
        </li>
    );
}}