日期選擇器上的 Material UI 自定義文本字段

Question

好吧，所以我在我的 React 項目上使用Material UI ，並使用他們建議的Material UI Pickers作為日期選擇器，現在的問題是，為了與我的其他領域保持一致，我想設置它用於我已經擁有的自定義 reddit 樣式文本字段組件的基本文本字段組件，這可以通過DatePicker 文檔中的屬性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>
  );
};