Стиль материала UI InputBase с выбором даты и времени

Question

Я пытаюсь стилизовать один из вариантов выбора даты и времени, найденных в пользовательском интерфейсе материала. Я сделал стиль ввода, который мне понравился, и пытался использовать его как основу. Добавление 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 обеспечивают стиль, который мне нравится для компонента:

Но мне нужно изменить цвет значка календаря справа и, если возможно, стиль средства выбора даты для темной темы.

Как я могу это сделать? Заранее спасибо.

Answer 1

Чао, к сожалению, изменить цвет значка (на белый, если я правильно понял) нельзя. Я также пытался переопределить &.MuiInputBase-inputкласс css, но единственное, чего я добился, - это изменить цвет текста.

Но вы можете сделать нечто большее (если хотите). Вы можете использовать DatePickerиз @material-ui/pickers. Это, конечно, более настраиваемое (и я думаю, более крутое).

Что вам нужно?

1. @ date-io / moment (обратите внимание на версию 1.x);
2. @ material-ui / pickers;
3. @ дата-ио / момент;
4. момент;

Установив эти библиотеки, вы можете сделать что-то вроде этого:

1. Определите тему:

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

2. Создайте тему Mui:

   const theme = createMuiTheme(Theme);
   

3. Используйте 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. Wrap 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.

Я знаю, что в первый раз это немного сложно (сколько вещей мне нужно сделать для простого выбора даты !!!), но результат графически красивее.

Вот пример codeandbox DatePicker.