title: Material ui: How to change DatePicker text and calendar icon color?
body: <p>I am trying to change the Material UI DatePicker date text and calendar icon color.<br>
  I tried to change it passing style to InputProps, but it worked only for removing border.<br>
  Rather than that, nothing changes, I tried to apply style to theme.tsx, but it also didn't help.
  Any help will be appreciated.</p>
  <pre><code>import * as React from &quot;react&quot;;
  import Stack from &quot;@mui/material/Stack&quot;;
  import TextField from &quot;@mui/material/TextField&quot;;
  import AdapterDateFns from &quot;@mui/lab/AdapterDateFns&quot;;
  import LocalizationProvider from &quot;@mui/lab/LocalizationProvider&quot;;
  import DesktopDatePicker from &quot;@mui/lab/DesktopDatePicker&quot;;
  import { makeStyles, createStyles } from &quot;@material-ui/core&quot;;
  
  const useStyles = makeStyles(() =&gt;
    createStyles({
      noBorder: {
        outline: &quot;none&quot;,
        border: &quot;none&quot;,
        color: &quot;#fff&quot;,
      },
    })
  );
  
  export default function DatePicker() {
    const [value, setValue] = React.useState&lt;Date | null&gt;();
    const classes = useStyles();
  
    const handleChange = (newvalue: Date | null) =&gt; {
      setValue(newvalue);
    };
  
    return (
      &lt;LocalizationProvider dateAdapter={AdapterDateFns}&gt;
        &lt;Stack spacing={2}&gt;
          &lt;DesktopDatePicker
            inputFormat=&quot;dd/MM/yyy&quot;
            value={value}
            onChange={handleChange}
            renderInput={(params) =&gt; &lt;TextField {...params} /&gt;}
            InputProps={{
              classes: { notchedOutline: classes.noBorder },
            }}
          /&gt;
        &lt;/Stack&gt;
      &lt;/LocalizationProvider&gt;
    );
  }
  </code></pre>