时间戳

首页 > 解决方案 > 如何自定义 Material UI 自动完成下拉菜单

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

问题描述

我正在使用 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>
    );
}}

标签： javascriptreactjstypescriptautocompletematerial-ui

解决方案

我会传递{ 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>
    );
}}

推荐阅读