Edited at

styled-components で Material Design の Text Fields (input) っぽいものを作る

Material-UI 等のライブラリを使わずに、styled componentsMaterial Design の Text Fields (input)っぽいものを作ってみました。

簡易的なものであり、完全再現はできていません。コード量は60行程度です。

styled components 特有の機能を使っているわけではないので、emotion でも素の CSS でも実装できます。

また、React Hooks を使っていますが、もちろん Class Component 等でも実装できます。


できたもの


See the Pen
React/Babel Starter
by y-take (@y-takey)
on CodePen.


ポイント


  • 背景色を透明にし、枠線も下部以外はなしにするだけで Material-UI っぽくなる。

  • input のフォーカスや値の有無でラベルの位置を調節して、inputの上側にしたり被せたりする。同様にラベルの文字色や下線の色もフォーカスの状態に応じて制御する。


ちなみに Ant Design 等の全く別のUIライブラリを使っていても、以下の様にすることで Material Design 化することができます。

import { Input as AntdInput } from "antd";

const Input = styled(AntdInput)`
// CSSは同じだけど、UIライブラリ特有の装飾が行われている場合は、その打ち消しが必要。
`
;