Изменить цвет значка часов в текстовом поле MUI с типом "время"

#css #reactjs #material-ui

Вопрос:

 <TextField
  id="endTime"
  label="End Time"
  onChange={onEndTimeChange}
  type="time"
  defaultValue="16:00"
  className={classes.textField}
/>

атрибут 'type="time"' — это то, что отображает значок, который выглядит как часы. Я хотел бы изменить цвет значка часов. Как я могу это сделать?

Ответ №1:

Вы можете использовать CSS, чтобы скрыть значок часов и использовать свой собственный значок:

Не тестировался во всех браузерах, но должен работать с браузерами, поддерживающими -webkit

 input[type="time"]::-webkit-calendar-picker-indicator {
  background: none;
 
}

input[type="time"]{
  z-index: 0;
  position: relative;
}

input[type="time"]:after{
  content: "";
  background-image: url(https://i.ibb.co/6g2dgm0/1535322171.png);
  height: 20px;
  width: 20px;
  background-size: contain;
  z-index: -1;
  position: absolute;
  right: 0;
}

 <input type="time" />

Ответ №2:

Вам следует взглянуть на TimePicker пакет in the lab, если вы хотите легко настроить компонент. Собственный ввод времени сложнее стилизовать из-за отсутствия поддержки. Например, измените значок на зеленый:

 <TextField
  sx={{
    'amp; input[type="time"]::-webkit-calendar-picker-indicator': {
      filter:
        'invert(78%) sepia(66%) saturate(6558%) hue-rotate(84deg) brightness(127%) contrast(116%)',
    },
  }}
  type="time"
  {...}
/>

Значение фильтра генерируется из этого кодового файла. Если вы решите использовать TimePicker , то код будет выглядеть следующим образом:

 <TimePicker
  label="Basic example"
  components={{
    OpenPickerIcon: (props) => (
      <AccessTimeIcon {...props} sx={{ color: 'red' }} />
    ),
  }}
  renderInput={(params) => <TextField {...params} />}
/>