更改 Material Ui 日期選擇器的背景顏色

Question

我想更改我的材料 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

在上面的代碼中，我能夠更改日期的 colors 和其他一些代碼，但不能更改總背景顏色

是否有任何文檔可以從中獲取這些 class 名稱或任何其他選項

Answer 1

在 CSS 中嘗試：

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

Answer 2

MuiPickers 使用對話框材質 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 （部分模態包裝器）

那么你可以覆蓋所有對話框模式。

Answer 3

在最新版本的 MUI (v5.3.1) 中，我通過在renderInput<\/code>的TextField<\/code>中添加sx={{ backgroundColor: 'white' }}<\/code>解決了這個問題，如下所示：

<MobileDatePicker
  label="Date"
  value={date}
  onChange={(newValue) => {
  setDate(newValue);
  }}
  renderInput={(params) => (
    <TextField
      sx={{ backgroundColor: 'white' }}
      fullWidth
      {...params}
    />
  )}
/>

Answer 4

您可以使用createTheme提供組件覆蓋（ 請參閱文檔）：

const theme = createTheme({
  components: {
    // Name of the component
    MuiInputBase: {
      styleOverrides: {
        // Name of the slot
        root: {
          // Some CSS
          backgroundColor: "white",
        },
      },
    },
  },
});

您可以通過檢查元素查看要使用的組件的名稱並查看 class 名稱，您可以在組件定義中找到插槽， 例如這是MuiInput組件的插槽。