MaterialUIのDate / Time pickersの入力欄をOutlinedにしたい

5192 ワード
React TypeScript material-ui TypeScript テキストリンク

タイトルそのまま。
やりたいんだけど、全く方法が見つけられなかった。
私はきっと同じことをしようとしてまたハマるので、備忘録的に書いておく。
結論だけ知りたい人は、一番したまでどうぞ。

やりたいこと


このデモの入力欄が下線になっている。
これを↓のTextFieldのOutlinedと同じようにしたい。

コードを見てみる

<KeyboardDatePicker
         disableToolbar
         variant="inline"
         format="MM/dd/yyyy"
         margin="normal"
         id="date-picker-inline"
         label="Date picker inline"
         value={selectedDate}
         onChange={handleDateChange}
         KeyboardButtonProps={{
           'aria-label': 'change date',
         }}
/>

となっているので、「KeyboardDatePicker」という部品であの入力欄が作られていることがわかった。
ならば、APIのページを見に行くだけだ！と検索欄にコピペ。

あれ？！ヒットしない？！

なんでだよ。使ってるじゃないか。
その部品の使い方を教えてくれよ。

やっと見つけた

まぁ、こんな変な苦労をしたのは
私が英語苦手すぎるが故なんだけど。

ずっと、「Material-UI」のドキュメントを漁ってた。
そしてあの部品はどこにいたのか。

「Material-UI pickers」という別のドキュメントにいた。

結果

先ほどのコードにinputVariant="outlined"と付けるだけで終わった

<KeyboardDatePicker
         inputVariant="outlined"
         disableToolbar
         variant="inline"
         format="MM/dd/yyyy"
         margin="normal"
         id="date-picker-inline"
         label="Date picker inline"
         value={selectedDate}
         onChange={handleDateChange}
         KeyboardButtonProps={{
           'aria-label': 'change date',
         }}
/>

完璧。