Material ui：如何更改 DatePicker 文本和日历图标颜色？答案

【问题标题】：Material ui: How to change DatePicker text and calendar icon color?Material ui：如何更改 DatePicker 文本和日历图标颜色？
【发布时间】：2021-12-18 12:38:34
【问题描述】：

我正在尝试更改 Material UI DatePicker 日期文本和日历图标颜色。
我尝试将其传递样式更改为 InputProps，但它仅适用于删除边框。
相反，没有任何改变，我尝试将样式应用于 theme.tsx，但它也没有帮助。任何帮助将不胜感激。

import * as React from "react";
import Stack from "@mui/material/Stack";
import TextField from "@mui/material/TextField";
import AdapterDateFns from "@mui/lab/AdapterDateFns";
import LocalizationProvider from "@mui/lab/LocalizationProvider";
import DesktopDatePicker from "@mui/lab/DesktopDatePicker";
import { makeStyles, createStyles } from "@material-ui/core";

const useStyles = makeStyles(() =>
  createStyles({
    noBorder: {
      outline: "none",
      border: "none",
      color: "#fff",
    },
  })
);

export default function DatePicker() {
  const [value, setValue] = React.useState<Date | null>();
  const classes = useStyles();

  const handleChange = (newvalue: Date | null) => {
    setValue(newvalue);
  };

  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <Stack spacing={2}>
        <DesktopDatePicker
          inputFormat="dd/MM/yyy"
          value={value}
          onChange={handleChange}
          renderInput={(params) => <TextField {...params} />}
          InputProps={{
            classes: { notchedOutline: classes.noBorder },
          }}
        />
      </Stack>
    </LocalizationProvider>
  );
}

【问题讨论】：

标签： reactjs datepicker material-ui

【解决方案1】：

尝试检查元素，然后您可以看到被检查元素的样式。检查元素非常有用。

【讨论】：

这应该是一条评论，因为它不直接回答问题。

【解决方案2】：

第一种解决方案 - 使用 sx 属性

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

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

Setting colors with sx prop

第二个解决方案 - 提供自定义主题

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

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

然后你用ThemeProvdier包装你的组件。

Overriding Theme Demo

【讨论】：

哇，我不知道你可以使用sx中的规则名称。