MUI TextFieldのInputPropsとinputPropsの違い

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

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

InputProps

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

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

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

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

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

たとえばcolorとか

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

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

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

たとえばvalueとか

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

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