如何修改MUI DateTimePicker弹出层（Popper）的背景颜色？

问题描述 #

想要将MUI DateTimePicker的桌面端和移动端弹出层（Popper）背景色从黑/灰色改为浅绿色，尝试使用popper、mobilePopper、desktopPopper选择器及相关SX配置，但均未生效，无效代码如下：

const popperSx : SxProps = {
    "& .MuiPaper-root" : {
        backgroundColor: 'lightgreen!important', // 未生效
    }
}

// ...组件代码省略

<DateTimePicker
    // ...其他属性
    slotProps={{
        field: { clearable: clearable, onClear: () => setCleared(true) },
        textField: {
            helperText: helperText,
            error: error,
            onBlur: handleBlurWrapper,
        },
        mobilePaper: popperSx,
        desktopPaper: popperSx,
        popper: popperSx
    }}
/>

解决方案 #

1. 修正SX配置逻辑 #

desktopPaper和mobilePaper对应的就是弹出层的Paper组件，无需嵌套.MuiPaper-root选择器，直接在SX中设置背景色即可：

const paperSx: SxProps = {
    backgroundColor: 'lightgreen',
    // 若遇样式优先级问题，可添加!important
    // backgroundColor: 'lightgreen !important',
};

2. 调整slotProps配置 #

仅需在desktopPaper和mobilePaper中传入SX配置，popper对应的是弹出层的容器而非Paper组件，不需要设置：

<DateTimePicker
    // ...其他属性
    slotProps={{
        field: { clearable: clearable, onClear: () => setCleared(true) },
        textField: {
            helperText: helperText,
            error: error,
            onBlur: handleBlurWrapper,
        },
        mobilePaper: { sx: paperSx },
        desktopPaper: { sx: paperSx }
    }}
/>

完整修改后组件代码 #

import { useState, useEffect } from 'react';
import { Box } from '@mui/material';
import { LocalizationProvider, DateTimePicker } from '@mui/x-date-pickers';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { frFR } from '@mui/x-date-pickers/locales';
import dayjs, { Dayjs } from 'dayjs';
import { SxProps } from '@mui/system';

interface OurDateTimePickerProps {
    value: Date | null;
    setValue: (value: Date | null) => void;
    sx?: SxProps;
    name: string;
    label: string;
    clearable?: boolean;
    disabled?: boolean;
    helperText?: string;
    onBlur?: (event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
    error?: boolean;
}

const paperSx: SxProps = {
    backgroundColor: 'lightgreen',
};

const OurDateTimePicker = ({
    value,
    setValue,
    sx,
    name,
    label,
    clearable = false,
    disabled = false,
    helperText,
    onBlur,
    error = false
}: OurDateTimePickerProps) => {

    const [selectedDate, setSelectedDate] = useState<Dayjs | null>(dayjs(value));

    useEffect(() => {
        setSelectedDate(dayjs(value));
    }, [value]);

    const handleSelectedDate = (newValue: Dayjs | null) => {
        setSelectedDate(newValue);
        if (newValue)
            setValue(new Date(newValue.format('YYYY-MM-DDTHH:mm:ss')));
    };

    const [cleared, setCleared] = useState<boolean>(false);

    useEffect(() => {
        if (cleared) {
            setValue(null);
            const timeout = setTimeout(() => {
                setCleared(false);
            }, 1500);

            return () => clearTimeout(timeout);
        }
    }, [cleared]);

    const handleBlurWrapper = (event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => {
        onBlur?.(event);
    };

    return (
        <Box sx={sx}>
            <LocalizationProvider
                dateAdapter={AdapterDayjs}
                adapterLocale="fr"
                localeText={frFR.components.MuiLocalizationProvider.defaultProps.localeText}>
                <DateTimePicker
                    name={name}
                    value={selectedDate}
                    onChange={handleSelectedDate}
                    sx={{ width: "100%" }}
                    label={label}
                    slotProps={{
                        field: { clearable: clearable, onClear: () => setCleared(true) },
                        textField: {
                            helperText: helperText,
                            error: error,
                            onBlur: handleBlurWrapper,
                        },
                        mobilePaper: { sx: paperSx },
                        desktopPaper: { sx: paperSx }
                    }}
                    disabled={disabled}
                />
            </LocalizationProvider>
        </Box>
    );
};

export default OurDateTimePicker;

原因说明 #

• 之前的代码中，popperSx通过嵌套.MuiPaper-root选择器设置样式，但desktopPaper和mobilePaper的slotProps已经直接作用于Paper组件本身，无需额外通过类名定位。
• popper对应的是弹出层的外层容器（Popper组件），而非承载日历的Paper组件，因此设置popper的SX不会影响弹出层背景色。

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