frontAnswerer/lib/ui_kit/CustomTextField.tsx

import { FormControl, TextField as MuiTextField, SxProps, Theme, useTheme } from "@mui/material";

import type { InputProps, TextFieldProps } from "@mui/material";
import type { ChangeEvent, FC, FocusEvent, KeyboardEvent } from "react";
import { Answer } from "@stores/quizView.ts";

const TextField = MuiTextField as unknown as FC<TextFieldProps>; // temporary fix ts(2590)

interface CustomTextFieldProps {
  placeholder: string;
  value?: Answer;
  error?: string;
  onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
  onKeyDown?: (event: KeyboardEvent<HTMLInputElement>) => void;
  onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
  text?: string;
  sx?: SxProps<Theme>;
  InputProps?: Partial<InputProps>;
}

export default function CustomTextField({
  placeholder,
  value,
  text,
  sx,
  error,
  onChange,
  onKeyDown,
  onBlur,
  InputProps,
}: CustomTextFieldProps) {
  const theme = useTheme();

  return (
    <FormControl fullWidth variant="standard" sx={{ p: 0 }}>
      <TextField
        defaultValue={text}
        fullWidth
        value={value}
        placeholder={placeholder}
        error={!!error}
        label={error}
        onChange={onChange}
        onKeyDown={onKeyDown}
        onBlur={onBlur}
        sx={{
          "& .MuiInputBase-root": {
            backgroundColor: theme.palette.background.default,
            height: "48px",
            borderRadius: "10px",
          },
          "& .MuiInputLabel-root": {
            fontSize: "13.5px",
            marginTop: "3px",
          },
          ...sx,
        }}
        InputProps={InputProps}
        inputProps={{
          sx: {
            borderRadius: "10px",
            fontSize: "18px",
            lineHeight: "21px",
            py: 0,
          },
        }}
        data-cy="textfield"
      />
    </FormControl>
  );
}