更改 MUI TextField 中類型為“time”的時鍾圖標顏色

Question

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

屬性'type="time"'是呈現看起來像時鍾的圖標的原因。 我想更改時鍾圖標的顏色。 我怎樣才能做到這一點？

Answer 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" />

Answer 2

如果您想輕松自定義組件，您應該查看實驗包中的TimePicker 。 由於缺乏支持，本地時間輸入更難設置樣式。 例如，以下將圖標更改為綠色：

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

過濾器值由此 codepen生成。 如果您決定使用TimePicker ，則代碼如下所示：

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