title: Material UI custom text field on date picker
body: <p>Alrighty, so I'm using <a href="http://material-ui.com/" rel="nofollow noreferrer">Material UI</a> on my react project and using their suggested <a href="https://material-ui-pickers.dev/" rel="nofollow noreferrer">Material UI Pickers</a> for a date picker, now the thing is, for it to be in line with the rest of my fields, I'd like to set the base textfield component it uses to a custom reddit-styled text field component I already have, this is possible via a property in the <a href="https://material-ui-pickers.dev/api/DatePicker" rel="nofollow noreferrer">DatePicker's documentation</a>, <code>TextFieldComponent</code>, however, passing my custom <code>LNTextField</code> in it isn't really giving any changes, let me show you, first here's the code for the <code>LNTextField</code></p>
  
  <pre class="lang-js prettyprint-override"><code>import React from "react";
  import { TextField, InputAdornment } from "@material-ui/core";
  import { makeStyles } from "@material-ui/core/styles";
  
  import styles from "./LNTextField.module.css";
  
  const useStylesReddit = makeStyles(theme =&gt; ({
    root: {
      border: "1px solid #D6D7DC",
      overflow: "hidden",
      borderRadius: 4,
      backgroundColor: "#fff",
      transition: theme.transitions.create(["border-color", "box-shadow"]),
      "&amp;:hover": {
        backgroundColor: "#fff"
      },
      "&amp;$focused": {
        backgroundColor: "#fff",
        borderColor: "#46CBAC"
      }
    },
    focused: {}
  }));
  
  const LNTextField = props =&gt; {
    const classes = useStylesReddit();
    return (
      &lt;TextField
        variant="filled"
        spellCheck="false"
        InputProps={
          props.optional
            ? {
                classes,
                disableUnderline: true,
                endAdornment: (
                  &lt;InputAdornment
                    className={styles.optionalAppendedText}
                    position="end"
                  &gt;
                    Optional
                  &lt;/InputAdornment&gt;
                )
              }
            : {
                classes,
                disableUnderline: true
              }
        }
        {...props}
      /&gt;
    );
  };
  
  export default LNTextField;
  </code></pre>
  
  <p>and this is the text for my desired datepicker component:</p>
  
  <pre class="lang-js prettyprint-override"><code>import React, { useState } from "react";
  import { DatePicker, MuiPickersUtilsProvider } from "@material-ui/pickers";
  import MomentUtils from "@date-io/moment";
  
  import styles from "./LNDatePicker.module.css";
  import LNTextField from "../LNTextField/LNTextField";
  
  const LNDatePicker = props =&gt; {
    return (
      &lt;MuiPickersUtilsProvider utils={MomentUtils}&gt;
        &lt;DatePicker
          clearable
          inputVariant="outlined"
          placeholder="10/10/2018"
          onChange={date =&gt; props.change_function(date)}
          format="MM/DD/YYYY"
          TextFieldComponent={LNTextField}
        /&gt;
      &lt;/MuiPickersUtilsProvider&gt;
    );
  };
  
  export default LNDatePicker;
  </code></pre>
  
  <p>This is the code for the date picker and a preceding text field using my text field component:</p>
  
  <pre class="lang-js prettyprint-override"><code>&lt;LNTextField
                                name="ssn"
                                label="Social Security Number"
                                error={touched.ssn &amp;&amp; errors.ssn ? true : false}
                                helperText={
                                  touched.ssn &amp;&amp; errors.ssn
                                    ? "* " + errors.ssn
                                    : ""
                                }
                                type="text"
                              /&gt;
  &lt;LNDatePicker
                            name="dob"
                            change_function={date =&gt; {
                              setFieldValue("dob", date.format("MM-DD-YYYY"));
                            }}
                          &gt;&lt;/LNDatePicker&gt;
  </code></pre>
  
  <p>Now if you take a look at the result I'm getting you will notice how the style is not being applied at all
  <a href="https://i.stack.imgur.com/YsFuc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YsFuc.png" alt="enter image description here"></a></p>
  
  <p>Is there something I'm missing or doing wrong? Am I following the docs incorrectly? thanks in advance.</p>