如何在 Material Ui 的 TextField 中更改日历的主题

Question

我正在使用材质 ui 并尝试更改日历的主题，但文本框已更改，尽管日历不受主题影响我也在发布图像和代码 sn-ps 也在这里

dateIcon: {
  'input[type="date"]::-webkit-calendar-picker-indicator': {
    color: 'green',
  },
},
DateBackGround: {
  background: theme.palette.background.paper,
  color: theme.palette.text.primary,
  '& .MuiOutlinedInput-input': {
    paddingRight: 2,
  },
},

<Grid item xs={6}>
      <div>
        <OutlinedTextField
          variant="outlined"
          type="date"
          id="by-this-date"
          size="small"
          onChange={updateWhatIfDate}
          value={expiryDateFormatted}
          className={`${`textInput`} ${classes.DateBackGround} ${classes.dateIcon}`}
          style={{ width: '100%' }}
        />
      </div>
    </Grid>

组件：-

实际输出：-

提前致谢

Answer 1

第一种解决方案：

您可以将 sx 属性设置为组件以覆盖默认样式属性：

const color = "#c44242";
...
return (
       <DatePicker
          renderInput={(params) => {
            return (
              <TextField
                {...params}
                sx={{
                  svg: { color },
                  input: { color },
                  label: { color }
                }}
              />
            );
          }}
          ...other props
        />
  )

第二个解决方案：

您还可以创建自定义主题并覆盖其中的颜色：

const theme = createTheme({
    components: {
      MuiIconButton: {
        styleOverrides: {
          sizeMedium: {
            color
          }
        }
      },
      MuiOutlinedInput: {
        styleOverrides: {
          root: {
            color
          }
        }
      },
      MuiInputLabel: {
        styleOverrides: {
          root: {
            color
          }
        }
      }
    }
  });