인프런 커뮤니티 질문&답변
작성한 질문수
material 붉은 밑줄
해결된 질문
작성
·
42
0
이런식으로 저도 그렇고, 로펀님도 그렇고 material 가져올때 붉은 밑줄이 나오는데, 이거 안 나오게 하는 방법이 있나요?
답변 2
0
로펀
지식공유자
안녕하세요 🙂 index.d.ts 파일을 별도로 하나 정의하신 후에 @material-tailwind/react에 대해 별도로 declare을 진행해주시면 됩니다. 아래 답변주신 것처럼 타입 정의가 까다롭게 되어있어서 저는 타입에러는 무시하고 별도로 덮어써서 진행을 합니다.
0
Material tailwind의 Input, Button 컴포넌트 내부적으로 React의 모든 input, button 속성을 포함하도록 타입을 선언한거 같아요.
그래서 사용하지 않은 타입도 명시적으로 전달을 해줘야 되는 불편한 부분이 있네요 아래와 같이 작성하시면 타입 오류는 해결될 거예요!
'use client';
import { Button, Input } from '@material-tailwind/react';
export default function UI() {
return (
<div className="w-2/3 mx-auto flex flex-col items-center py-10 gap-2">
<h1 className="text-xl">TODO LIST</h1>
<Input
label="Search TODO"
placeholder="할일을 검색하세요"
icon={<i className="fas fa-search" />}
crossOrigin=""
onResize={undefined}
onResizeCapture={undefined}
onPointerEnterCapture={undefined}
onPointerLeaveCapture={undefined}
/>
<Button
placeholder=""
onResize={undefined}
onResizeCapture={undefined}
onPointerEnterCapture={undefined}
onPointerLeaveCapture={undefined}
>
<i className="fas fa-plus mr-2" />
ADD TODO
</Button>
</div>
);
}
'{ label: string; placeholder: string; icon: Element; }' 형식에 'Pick<InputProps, "children" | "form" | "label" | "slot" | "style" | "title" | "pattern" | "className" | "onMouseEnter" | "onTouchStart" | "onClick" | "type" | "defaultChecked" | ... 285 more ... | "shrink">' 형식의 onResize, onResizeCapture, onPointerEnterCapture, onPointerLeaveCapture, crossOrigin 속성이 없습니다.ts(2739)
(alias) const Input: ForwardRefExoticComponent<Pick<InputProps, "children" | "form" | "label" | "slot" | "style" | "title" | "pattern" | "className" | "onMouseEnter" | "onTouchStart" | "onClick" | "type" | "defaultChecked" | ... 285 more ... | "shrink"> & RefAttributes<...>>
import Input