如何修改MUI DesktopDatePicker的日期选择器打开图标颜色？

要修改DesktopDatePicker的打开图标颜色，有几种直接的实现方式，结合你的现有代码，推荐以下方案：

方案一：通过slotProps.textField.sx直接定位图标元素 #

利用MUI的CSS选择器，在textField的sx属性里选中图标对应的按钮元素，直接设置颜色：

import React from 'react'
import { DesktopDatePicker } from '@mui/x-date-pickers';

function DatePicker() {
    return (
        <DesktopDatePicker
            slotProps={{
                textField: {
                    variant: 'filled',
                    focused: true,
                    color: 'secondary',
                    sx: { 
                        mb: 3, 
                        ml: 5, 
                        color: 'red',
                        // 定位日期选择器的图标按钮
                        '& .MuiIconButton-root': {
                            color: 'blue' // 替换为你需要的图标颜色
                        }
                    }
                }
            }}
        />
    )
}

export default DatePicker

方案二：通过InputProps自定义图标样式 #

如果需要更精细的控制，可以在textField的InputProps里直接替换并自定义末尾装饰的图标样式：

import React from 'react'
import { DesktopDatePicker } from '@mui/x-date-pickers';
import { IconButton } from '@mui/material';
import CalendarTodayIcon from '@mui/icons-material/CalendarToday';

function DatePicker() {
    return (
        <DesktopDatePicker
            slotProps={{
                textField: {
                    variant: 'filled',
                    focused: true,
                    color: 'secondary',
                    sx: { mb: 3, ml: 5, color: 'red' },
                    InputProps: {
                        endAdornment: (
                            <IconButton sx={{ color: 'green' }}>
                                <CalendarTodayIcon />
                            </IconButton>
                        )
                    }
                }
            }}
        />
    )
}

export default DatePicker

方案三：全局主题统一配置（可选） #

如果需要项目中所有日期选择器的图标颜色保持一致，可以在MUI主题中全局覆盖样式：

import { createTheme, ThemeProvider } from '@mui/material/styles';
import DatePicker from './DatePicker';

const theme = createTheme({
    components: {
        MuiDatePicker: {
            styleOverrides: {
                root: {
                    '& .MuiIconButton-root': {
                        color: 'purple'
                    }
                }
            }
        }
    }
});

function App() {
    return (
        <ThemeProvider theme={theme}>
            <DatePicker />
        </ThemeProvider>
    )
}

export default App;

以上三种方案都能实现修改图标颜色的需求，可根据你的实际场景选择使用。

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