DEVDEV

MuiでTextFieldにunderlineを設定しようとしたらType Errorが発生する

作成日
2022-05-06
更新日
2022-05-06

解決方法

TextFieldPropsではなく、StandardTextFieldPropsを使用する。

Cannot pass underline class through TextField as InputProps · Issue #13794 · mui/material-ui

問題

tsx
import React from 'react' import { TextField, TextFieldProps } from '@material-ui/core' type Props = TextFieldProps & { classes: Record<string, string> } export function renderInput(inputProps: Props) { const { InputProps } = inputProps return ( // 👇 TypeError <TextField InputProps={{ classes: { underline: classes.inputUnderline, }, }} /> ) }

修正

tsx
import React from 'react' // 👇 StandardTextFieldProps に変更 import { TextField, StandardTextFieldProps } from '@material-ui/core' type Props = StandardTextFieldProps & { classes: Record<string, string> } export function renderInput(inputProps: Props) { const { InputProps } = inputProps return ( <TextField InputProps={{ classes: { underline: classes.inputUnderline, }, }} /> ) }

Related

TAGS

ReactJS
TypeScript

SHARE