Material ui: 如何更改DatePicker 文本和日历图标的颜色？

Question

我正在尝试更改 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>
  );
}

Answer 1

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

Answer 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

Answer 3

对我有用的解决方案如下 - 我在<TextField/>中使用了sx 属性，dmitriif也提到了。实现看起来像这样 -

 <DateTimePicker
    value={value}
    onChange={handleChange}
    renderInput={(params) => (
        <TextField
            {...params}
            sx={{
              svg: { color: '#fff' },
              input: { color: '#fff' },
            }}
         />
     )}
  />

Material ui: 如何更改DatePicker 文本和日历图标的颜色？

Material ui: How to change DatePicker text and calendar icon color?

reactjs

datepicker

material-ui