Style Material UI InputBase dengan alat pilih Tanggal & Waktu

Question

Saya mencoba memberi gaya salah satu opsi untuk pemetik waktu tanggal yang ditemukan di materi ui. Saya membuat Input bergaya yang saya suka, dan mencoba menggunakannya sebagai basis. Menambahkan type="datetime-local"prop ke komponen menambahkan fungsionalitas yang saya butuhkan, tetapi saya tidak dapat menemukan cara untuk mengatur gaya tombol ikon dan dialog.

Ini eksperimen saya di kotak pasir kode:

Kode untuk komponen tersebut terlihat seperti ini:

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

ClassNames memberikan gaya yang saya suka untuk komponen:

Tetapi saya perlu mengubah warna untuk ikon kalender di sebelah kanan dan jika mungkin gaya pemilih tanggal untuk tema gelap.

Bagaimana saya bisa melakukan itu? Terima kasih sebelumnya.

Answer 1

Ciao, sayangnya Anda tidak dapat mengubah warna ikon (menjadi putih jika saya mengerti dengan benar). Saya mencoba untuk mengganti &.MuiInputBase-inputkelas css juga tetapi satu-satunya hal yang saya capai adalah mengubah warna teks.

Tetapi Anda dapat melakukan sesuatu yang lebih (jika Anda mau). Anda dapat menggunakan DatePickerdari @material-ui/pickers. Ini tentu saja lebih dapat disesuaikan (dan menurut saya lebih keren).

Apa yang kamu butuhkan?

1. @ date-io / moment (versi 1.x perhatikan ini);
2. @ material-ui / pemetik;
3. @ date-io / moment;
4. saat;

Memasang perpustakaan ini, Anda dapat melakukan sesuatu seperti itu:

1. Tentukan Tema:

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

2. Buat tema Mui:

   const theme = createMuiTheme(Theme);
   

3. Gunakan 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}
      />
   

4. Bungkus DatePickermenjadi ThemeProvider(untuk lolos Themeke DatePicker) dan menjadi MuiPickersUtilsProvider(untuk mengatur tanggal dengan 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>
   

Dan sekarang jika Anda mengklik input tanggal, Anda mendapatkan ini:

DatePicker dengan gaya gelap. Ini adalah dialog pemilih tanggal tetapi Anda juga dapat memiliki pemilih tanggal sebaris (menggunakan KeyboardDatePicker).

Di sini Anda dapat menemukan semua versi pemilih tanggal yang disediakan oleh MaterialUI.

Saya tahu, ini sedikit rumit untuk pertama kalinya (berapa banyak hal yang harus saya lakukan untuk pemilih tanggal yang sederhana !!!) tetapi hasilnya secara grafis lebih indah.

Berikut adalah contoh kode dan kotak DatePicker.