Question

好的，所以我在我的React项目上使用Material UI，并使用他们建议的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>
  );
};

日期选择器上的重要UI自定义文本字段

1 个答案: