javascript - 日期选择器上的 Material UI 自定义文本字段

Question

好吧，所以我正在使用 Material UI在我的 React 项目中使用他们建议的 Material UI Pickers对于日期选择器，现在的问题是，为了使其与我的其余字段保持一致，我想将它使用的基本文本字段组件设置为我已经拥有的自定义 reddit 样式的文本字段组件，这是可能通过 DatePicker's documentation 中的一个属性, TextFieldComponent , 然而，传递我的习惯 LNTextField它并没有真正进行任何更改，让我向您展示，首先这是 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;

这是我想要的日期选择器组件的文本:

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;

这是使用我的文本字段组件的日期选择器和前面的文本字段的代码:

<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>

现在，如果您看一下我得到的结果，您会注意到根本没有应用样式

我是否遗漏或做错了什么？我是否错误地遵循了文档？提前致谢。

Answer 1

您需要将 LNTextField 包装在这样的函数中:

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>
  );
};