InputBase dell'interfaccia utente del materiale di stile con selettori di data e ora
Sto cercando di modellare una delle opzioni per i selettori di data e ora che si trovano nell'interfaccia utente del materiale. Ho creato un input in stile che mi piaceva e stavo cercando di usarlo come base. L'aggiunta type="datetime-local"
dell'elica al componente aggiunge la funzionalità di cui ho bisogno, ma non riesco a trovare un modo per modellare il pulsante icona e la finestra di dialogo.
Ecco il mio esperimento nella sandbox del codice:
Il codice per il componente ha questo aspetto:
<Paper component="form" className={classes.paper} elevation={0}>
<InputBase
className={classes.input}
type="datetime-local"
defaultValue="2017-05-24T10:30"
/>
</Paper>
I classNames forniscono lo stile che mi piace per il componente:


Ma ho bisogno di cambiare il colore per l'icona del calendario a destra e, se possibile, lo stile del selettore di date per un tema scuro.
Come lo posso fare? Grazie in anticipo.
Risposte
Ciao, purtroppo non puoi cambiare il colore dell'icona (in bianco se ho capito bene). Ho provato a sovrascrivere &.MuiInputBase-input
anche la classe CSS, ma l'unica cosa che ho ottenuto è stata cambiare il colore del testo.
Ma puoi fare qualcosa di più (se vuoi). Puoi usare DatePicker
da @material-ui/pickers
. Questo è ovviamente più personalizzabile (e penso più interessante).
Di che cosa hai bisogno?
- @ date-io / moment (versione 1.x prestare attenzione a questo);
- @ material-ui / pickers;
- @ date-io / moment;
- momento;
Installate queste librerie puoi fare qualcosa del genere:
Definisci un tema:
const Theme = { palette: { primary: { // primary color contrastText: "#FFFFFF", dark: "#000000", main: "#000000", // black light: "#000000" } } };
Crea un tema Mui:
const theme = createMuiTheme(Theme);
Usa un
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} />
Avvolgi
DatePicker
in aThemeProvider
(per passareTheme
aDatePicker
) e in aMuiPickersUtilsProvider
(per gestire l'appuntamento conmoment
):<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>
E ora se fai clic sull'inserimento della data hai questo:

Un DatePicker con uno stile scuro. Questa è una finestra di dialogo per la selezione della data, ma puoi anche avere un selettore della data in linea (usando KeyboardDatePicker
).
Qui puoi trovare tutte le versioni del selettore di date fornite da MaterialUI.
Lo so, è un po 'complicato la prima volta (quante cose devo fare per un semplice selettore di date !!!) ma il risultato è graficamente più bello.
Ecco un esempio di codeandbox DatePicker
.