Reddit реализация текстового поля Material-UI

Question

Поэтому я пытаюсь имитировать реализацию текстового поля reddit из material-ui, я продолжил и настраивал этот пользовательский компонент, но я получаю ошибку недопустимого перехвата каждый раз, когда я запускаюв строке const classes=...

Вот код:

import React, { Component } from "react";
import { TextField } from "@material-ui/core";
import { fade, makeStyles } from "@material-ui/core/styles";

import styles from "./LNTextField.module.css";

const useStylesReddit = makeStyles(theme => ({
  root: {
    border: "1px solid #e2e2e1",
    overflow: "hidden",
    borderRadius: 4,
    backgroundColor: "#fcfcfb",
    transition: theme.transitions.create(["border-color", "box-shadow"]),
    "&:hover": {
      backgroundColor: "#fff"
    },
    "&$focused": {
      backgroundColor: "#fff",
      boxShadow: `${fade(theme.palette.primary.main, 0.25)} 0 0 0 2px`,
      borderColor: theme.palette.primary.main
    }
  },
  focused: {}
}));

class LNTextField extends Component {
  render() {
    var classNames = require("classnames");
    const classes = useStylesReddit();

    return (
      <TextField
        InputProps={{ classes, disableUnderline: true }}
        {...this.props}
      />
    );
  }
}

export default LNTextField;

Кроме того, так как я только что скопировал его, я не уверен, как я могу набрать этот код в отдельных файлах CSS и обратиться кколебание и фокусировка соответственно, так что, если бы вы также могли сказать мне, как это сделать, это было бы здорово. Спасибо!

Answer 1

Согласно React, вы получаете эту ошибку, потому что:

Вы не можете использовать зацепки внутри компонента класса

Преобразовать ваш компонент класса в функциональный компонент:

const LNTextField = props => {
    var classNames = require("classnames");
    const classes = useStylesReddit();

    return (
      <TextField
        InputProps={{ classes, disableUnderline: true }}
        {...props}
      />
    );
}