reactjs - 如何更改 React 的 Material-ui 日期选择器中的图标
问题描述
如何更改材质 UI 日期选择器图标?
我在代码或文档的 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>
);
}
其他一切正常,我只需要将图像编辑为不同的图标。
解决方案
首先通过 Google Web Fonts 将 Material 图标字体包含到您的项目中:
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
那么你需要像这样导入 Icon 组件
import Icon from "@material-ui/core/Icon";
然后通过使用 Icon 组件包装图标名称(字体连字),在 KeyboardDatePicker 组件中包含“keyboardIcon”属性,如下所示:
<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,那么您必须使用 Icon 组件的 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" />}}
/>
推荐阅读
- android - Room 无法验证数据完整性,即使在卸载应用程序然后重新安装后也是如此
- c++ - C++ 上的并行并不像 C# 那样快
- verilog - 左移直到 MSB 为 1:超出循环计数限制。条件永远不会是假的
- powershell - 记录从单个父 ps 脚本调用的多个子 ps 脚本的输出的最佳简单方法是什么?
- c - 如何删除C中的特定记录
- r - 如何按一列分组并获取其他列的方法
- javascript - js类返回未定义的对象
- html - CSS区分悬停在元素上和它的 ::before 伪元素
- javascript - 在制作 Leaflet 地图时,如何将 GeoJSON 坐标拉取并转换为 latLng?
- git - git中的changeset和codecurn是什么