日付と時刻のピッカーを備えたスタイルマテリアルUIInputBase

Aug 21 2020

マテリアルUIにある日時ピッカーのオプションの1つをスタイリングしようとしています。私は好きなスタイルの入力を作成し、それをベースとして使用しようとしていました。type="datetime-local"コンポーネントに小道具を追加すると、必要な機能が追加されますが、アイコンボタンとダイアログのスタイルを設定する方法が見つかりません。

これがコードサンドボックスでの私の実験です：

コンポーネントのコードは次のようになります。

<Paper component="form" className={classes.paper} elevation={0}>
  <InputBase
    className={classes.input}
    type="datetime-local"
    defaultValue="2017-05-24T10:30"
  />
</Paper>

classNamesは、コンポーネントに適したスタイルを提供します。

ただし、右側のカレンダーアイコンの色を変更する必要があり、可能であれば、ダークテーマの日付ピッカーのスタイルを変更する必要があります。

どうやってやるの？前もって感謝します。

回答

1 GiovanniEsposito Aug 21 2020 at 04:10

チャオ、残念ながらアイコンの色を変更することはできません（私が正しく理解していれば白に）。&.MuiInputBase-inputcssクラスもオーバーライドしようとしましたが、達成したのはテキストの色を変更することだけでした。

しかし、あなたはもっと何かをすることができます（あなたが望むなら）。DatePickerから使用できます@material-ui/pickers。もちろん、これはよりカスタマイズ可能です（そして私はもっとクールだと思います）。

あなたは何が必要ですか？

@ date-io / moment（1.xバージョンはこれに注意を払います）;
@ material-ui / pickers;
@ date-io / moment;
瞬間;

このライブラリをインストールすると、次のようなことができます。

テーマを定義する：

const Theme = {
  palette: {
    primary: {  // primary color
    contrastText: "#FFFFFF",
    dark: "#000000",  
    main: "#000000",  // black
    light: "#000000"
  }
}
};

Muiテーマを作成します。
```
const theme = createMuiTheme(Theme);
```

を使用してくださいDatePicker：

 <DatePicker
     format={"DD-MM-YYYY"}  // your date format
     label="my date"
     inputVariant="outlined" // if you want an outlined date input
     helperText=""
     size="small"
     value={myDate}
     onChange={setmyDate}
   />

ラップDatePickerにはThemeProvider（渡すThemeにDatePickerし、に）MuiPickersUtilsProvider（管理するための日付とmoment）：

 <ThemeProvider theme={theme}>
   <MuiPickersUtilsProvider utils={MomentUtils}>
     <div className="App">
       <DatePicker
         format={"DD-MM-YYYY"}
         label="my date"
         inputVariant="outlined"
         helperText=""
         size="small"
         value={myDate}
         onChange={setmyDate}
       />
     </div>
   </MuiPickersUtilsProvider>
 </ThemeProvider>

そして今、あなたが日付入力をクリックすると、あなたはこれを手に入れました：

ダークスタイルのDatePicker。これは日付ピッカーダイアログですが、（を使用してKeyboardDatePicker）日付ピッカーをインラインにすることもできます。

ここでは、MaterialUIが提供するすべての日付ピッカーのバージョンを見つけることができます。

初めては少し注意が必要ですが（単純な日付ピッカーで何をしなければならないか!!!）、結果はグラフィカルに美しくなります。