Style Material UI InputBase com seletores de data e hora

Question

Estou tentando definir o estilo de uma das opções para selecionadores de data e hora encontrados no material ui. Fiz uma entrada estilizada de que gostei e estava tentando usá-la como base. Adicionar o type="datetime-local"suporte ao componente adiciona a funcionalidade de que preciso, mas não consigo encontrar uma maneira de estilizar o botão do ícone e a caixa de diálogo.

Aqui está meu experimento na sandbox de código:

O código do componente se parece com este:

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

Os classNames fornecem o estilo que gosto para o componente:

Mas preciso mudar a cor do ícone de calendário à direita e, se possível, o estilo do seletor de data para um tema escuro.

Como eu posso fazer isso? Desde já, obrigado.

Answer 1

Ciao, infelizmente você não pode mudar a cor do ícone (para branco se entendi bem). Eu tentei substituir a &.MuiInputBase-inputclasse css também, mas a única coisa que consegui foi mudar a cor do texto.

Mas você pode fazer algo mais (se quiser). Você pode usar DatePickerde @material-ui/pickers. É claro que isso é mais personalizável (e acho mais legal).

O que você precisa?

1. @ date-io / moment (versão 1.x preste atenção nisso);
2. @ material-ui / pickers;
3. @ date-io / moment;
4. momento;

Instalado essas bibliotecas, você pode fazer algo assim:

1. Defina um tema:

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

2. Crie um tema Mui:

   const theme = createMuiTheme(Theme);
   

3. Use um 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. Envolva DatePickerem ThemeProvider(para passar Themepara DatePicker) e em MuiPickersUtilsProvider(para gerenciar data com 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>
   

E agora, se você clicar na entrada de data, terá o seguinte:

Um DatePicker com um estilo escuro. Esta é uma caixa de diálogo de seletor de data, mas você também pode ter um seletor de data embutido (usando KeyboardDatePicker).

Aqui você pode encontrar todas as versões do selecionador de data fornecidas pela MaterialUI.

Eu sei, é um pouco complicado da primeira vez (quantas coisas eu tenho que fazer para um simples selecionador de data !!!), mas o resultado é graficamente mais bonito.

Aqui está um exemplo de codesandbox de DatePicker.