MUI TextFieldのInputPropsとinputPropsの違い

2023-02-16MUIMaterialUIReact


仕事でMUIを使ったコードを読んでたらTextFieldのプロパティにinputProps, InputPropsi,Iで両方あることに気付いた

違いは何だと言うことで調べた

TextField API - Material UI

InputProps

Input要素に適用されるプロパティ

variant prop の値に応じて、FilledInput、OutlinedInput、Inputコンポーネントのいずれかになる

なるほど、TextFieldはFilledInput,OutlinedInput,Inputをより抽象化したコンポーネントで、この3つのコンポーネントのどれかに適用させるプロパティを指定するということのよう

試しにFilledInputのAPIドキュメントを見に行くとinputPropsのみしかないのでなるほどとなった

FilledInput API - Material UI

このページでのPropsの中で指定したいものがあれば指定するとういことと理解した

たとえばcolorとか

あとはTextFieldを使って汎用的なカスタムコンポーネントを作った場合などもInputPropsを受け取ってそのままTextFieldに流すことでカスタマイズ可能で汎用的なカスタムコンポーネントを作れる

inputProps

input要素に適用するプロパティを指定する

お馴染みのinputタグに指定するプロパティを指定する

たとえばvalueとか

どのタグやコンポーネントに作用させたいかでPropsの大文字小文字を切り替えると理解した

よく考えられているなーと感じたが初見ではとっつきづらいしややこしいな…と感じた


関連記事