更改 Material Ui 日期选择器的背景颜色答案

【问题标题】：Change background color of Material Ui datepicker更改 Material Ui 日期选择器的背景颜色
【发布时间】：2021-02-24 06:31:24
【问题描述】：

我想更改我的材质 ui datepicker modal 的背景颜色

从“@material-ui/core”导入 { createMuiTheme }；

const materialTheme = createMuiTheme({
    overrides: {
        MuiPickersToolbar: {
            toolbar: {
                backgroundColor: 'red',
            },
        },
        MuiPickersDay: {
            day: {
                color: 'black',

            },
            daySelected: {
                backgroundColor: '#33abb6',
            },
            dayDisabled: {
                color: '#ccc',
            },
            current: {
                color: 'red',
            },
        },
        MuiPickersModal: {
            dialogAction: {
                color: '#33abb6',
            },
        },
    },
});


export default materialTheme

在上面的代码中，我可以更改日期和其他一些颜色，但不能更改总背景颜色

是否有任何文档可以让我获得这些类名或任何其他选项

【问题讨论】：

标签： javascript reactjs datepicker material-ui

【解决方案1】：

在 CSS 中尝试：

.MuiPaper-root {
  background-color: #eaea87;
}

【讨论】：

我想要一个 jss 的解决方案

【解决方案2】：

MuiPickers 正在使用 Dialog Material Ui，因此请覆盖此选取器中使用的所有对话框组件。我不确定下面的这个解决方案。你可以试试这个，希望成功。

   const materialTheme = createMuiTheme({
        overrides: {
            MuiPickersToolbar: {
                toolbar: {
                    backgroundColor: 'red',
                },
            },
            MuiPickersDay: {
                day: {
                    color: 'black',
    
                },
                daySelected: {
                    backgroundColor: '#33abb6',
                },
                dayDisabled: {
                    color: '#ccc',
                },
                current: {
                    color: 'red',
                },
            },
            MuiPickersModal: {
                dialogAction: {
                    color: '#33abb6', 
                    backgroundColor: 'YOUR HEX HERE',
                },
            },
        },
    });

我认为最好的方法是在 DialogProps 中发送样式

https://material-ui-pickers.dev/api/DateTimePicker（部分模态包装）

所以你可以覆盖所有对话框模式。

【讨论】：