Как я могу изменить значок в материале-UI выбора даты для React

Question

Как изменить значок выбора даты в пользовательском интерфейсе материала?

Я не вижу его нигде в коде или разделах API документов.

Вот ссылка на их документы: https://material -ui.com / components / pickers /

import 'date-fns';
import React from 'react';
import Grid from '@material-ui/core/Grid';
import DateFnsUtils from '@date-io/date-fns';
import {
  MuiPickersUtilsProvider,
  KeyboardTimePicker,
  KeyboardDatePicker,
} from '@material-ui/pickers';

export default function MaterialUIPickers() {
  // The first commit of Material-UI
  const [selectedDate, setSelectedDate] = React.useState(new Date('2014-08-18T21:11:54'));

  const handleDateChange = date => {
    setSelectedDate(date);
  };

  return (
    <MuiPickersUtilsProvider utils={DateFnsUtils}>
      <Grid container justify="space-around">
        <KeyboardDatePicker
          disableToolbar
          variant="inline"
          format="MM/dd/yyyy"
          margin="normal"
          id="date-picker-inline"
          label="Date picker inline"
          value={selectedDate}
          onChange={handleDateChange}
          KeyboardButtonProps={{
            'aria-label': 'change date',
          }}
        />
      </Grid>
    </MuiPickersUtilsProvider>
  );
}

Все остальное работает нормально, мне просто нужно отредактировать изображение на другой значок.

Answer 1

Сначала включите шрифт значка Материал в свой проект через Google Web Fonts:

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />

, затем вам нужно импортировать компонент Icon следующим образом:

import Icon from "@material-ui/core/Icon";

Затем включите 'Свойство keyboardIcon 'в вашем компоненте KeyboardDatePicker, обернув имя значка (лигатура шрифта) с компонентом Icon следующим образом:

<KeyboardDatePicker
      disableToolbar
      variant="inline"
      format="MM/dd/yyyy"
      margin="normal"
      id="date-picker-inline"
      label="Date picker inline"
      value={selectedDate}
      onChange={handleDateChange}
      KeyboardButtonProps={{
        'aria-label': 'change date',
      }}
      keyboardIcon={<Icon>add_circle</Icon>}
    />

Если вы используете вместо этого Font Awesome, тогда вы должны указать имя класса, используяСвойство className компонента иконки:

<KeyboardDatePicker
      disableToolbar
      variant="inline"
      format="MM/dd/yyyy"
      margin="normal"
      id="date-picker-inline"
      label="Date picker inline"
      value={selectedDate}
      onChange={handleDateChange}
      KeyboardButtonProps={{
        'aria-label': 'change date',
      }}
      keyboardIcon={keyboardIcon={<Icon className="fa fa-plus-circle" />}}
    />