今天要实作的是 TextField ，虽然是参照 Material-UI 的概念，但在这边只是实作个外壳，必没有要像 Material 那样 Input 和 Select 都整合进去，而是在 Input 那边再引用，这就待 Day 25 介绍 Input 的时候跟大家说了！

想先看 Code 或是 Demo 的由此去

Github Repo： ithelp-ui-demo

Live Demo：TextField

TextField

Interface / API

老样子先来看看它会有哪些 Props，那这些就是操作一个 input-like 的输入框会需要的值：

写成 Interface 则一样是运用 扩充原生 div 的方式去写额外的 Props：

元件实作

在这边可以更明显看出来 TextField 就是手动去写一个 Input-like 的输入框，让之後传入的 Input 和 Select 只需要专注在功能，在样式上，不论是前缀还是後缀的 Icon 或是 disabled、error 等的状态也可以无痛地在 TextField 这边统一。