日期选择器上的材质 UI 自定义文本字段

Question

好的，所以我在我的 react 项目中使用 Material UI 并使用他们建议的 Material UI Pickers 作为日期选择器，现在问题是，为了与我的其他领域保持一致，我会喜欢将它使用的基本文本字段组件设置为我已经拥有的自定义 reddit 样式的文本字段组件，这可以通过 DatePicker's documentation、TextFieldComponent 中的属性来实现，但是，将我的自定义 LNTextField 传递给它不是t真的给出任何改变，让我告诉你，首先这是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>
  );
};