Material UI custom text field on date picker

Question

Alrighty, so I'm using Material UI on my react project and using their suggested Material UI Pickers 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 DatePicker's documentation , TextFieldComponent , however, passing my custom LNTextField in it isn't really giving any changes, let me show you, first here's the code for the LNTextField

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 => ({
  root: {
    border: "1px solid #D6D7DC",
    overflow: "hidden",
    borderRadius: 4,
    backgroundColor: "#fff",
    transition: theme.transitions.create(["border-color", "box-shadow"]),
    "&:hover": {
      backgroundColor: "#fff"
    },
    "&$focused": {
      backgroundColor: "#fff",
      borderColor: "#46CBAC"
    }
  },
  focused: {}
}));

const LNTextField = props => {
  const classes = useStylesReddit();
  return (
    <TextField
      variant="filled"
      spellCheck="false"
      InputProps={
        props.optional
          ? {
              classes,
              disableUnderline: true,
              endAdornment: (
                <InputAdornment
                  className={styles.optionalAppendedText}
                  position="end"
                >
                  Optional
                </InputAdornment>
              )
            }
          : {
              classes,
              disableUnderline: true
            }
      }
      {...props}
    />
  );
};

export default LNTextField;

and this is the text for my desired datepicker component:

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 => {
  return (
    <MuiPickersUtilsProvider utils={MomentUtils}>
      <DatePicker
        clearable
        inputVariant="outlined"
        placeholder="10/10/2018"
        onChange={date => props.change_function(date)}
        format="MM/DD/YYYY"
        TextFieldComponent={LNTextField}
      />
    </MuiPickersUtilsProvider>
  );
};

export default LNDatePicker;

This is the code for the date picker and a preceding text field using my text field component:

<LNTextField
                              name="ssn"
                              label="Social Security Number"
                              error={touched.ssn && errors.ssn ? true : false}
                              helperText={
                                touched.ssn && errors.ssn
                                  ? "* " + errors.ssn
                                  : ""
                              }
                              type="text"
                            />
<LNDatePicker
                          name="dob"
                          change_function={date => {
                            setFieldValue("dob", date.format("MM-DD-YYYY"));
                          }}
                        ></LNDatePicker>

Now if you take a look at the result I'm getting you will notice how the style is not being applied at all

Is there something I'm missing or doing wrong? Am I following the docs incorrectly? thanks in advance.

Answer 1

You need to wrap your LNTextField in a function like this:

const LNDatePicker = props => {
  const renderInput = props => <LNTextField value={props.value} label={props.lable} />
  return (
    <MuiPickersUtilsProvider utils={MomentUtils}>
      <DatePicker
        clearable
        inputVariant="outlined"
        placeholder="10/10/2018"
        onChange={date => props.change_function(date)}
        format="MM/DD/YYYY"
        TextFieldComponent={renderInput}
      />
    </MuiPickersUtilsProvider>
  );
};