As I attempt to replicate the Reddit text field design from material-ui, I've created a custom component. However, I keep encountering an invalid hook call error when I reach the line containing const classes=....
Here is the code snippet:
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;
Furthermore, as I'm new to this implementation, I'm unsure about how to separate this code into distinct CSS files and appropriately reference the hover and focused elements. If you could provide guidance on that aspect as well, it would be highly appreciated. Thank you!