如何更改材料UI日期选择器图标?
我在文档的代码或API部分中都看不到它。
以下是其文档的链接:https://material-ui.com/components/pickers/
widget()
其他所有功能均正常运行,我只需要将图像编辑为其他图标即可。
答案 0 :(得分:0)
首先通过Google Web字体将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" />}}
/>
答案 1 :(得分:0)
我的自定义共享用户界面import {Datepicker} from '@dwp/ui'
<Datepicker
fullWidth
classes={classes}
format="dd/MM/yyyy"
minDateMessage=""
maxDateMessage=""
value={selectedDate}
coloricon={$white}
InputProps={{
classes: {
underline: classes.underline,
disabled: classes.disabled,
},
}}
onChangeDate={(value) => handleDateChange(value)}
disabled
/>
来自@@ dwp / ui
的共享datepicker
的来源
export function Datepicker(props) {
const {
minDate = new Date(),
onChangeDate,
value,
classes,
coloricon,
InputProps,
disabled,
} = props
const onChange = (payload) => onChangeDate(payload)
return (
<MuiPickersUtilsProvider utils={DateFnsUtils} locale={localeMap['au']}>
<KeyboardDatePicker
variant="inline"
minDate={minDate}
format="dd/MM/yyyy"
margin="normal"
placeholder="10/10/2018"
onChange={(payload) => {
onChange(payload)
}}
KeyboardButtonProps={{
'aria-label': 'change date',
}}
value={value || minDate}
keyboardIcon={
<A.QueryBuilderIcon
coloricon={disabled ? `rgba(255, 255, 255, 0.36)` : coloricon}
/>
}
className={classes.underline}
InputProps={InputProps}
disabled={disabled}
/>
</MuiPickersUtilsProvider>
)
}
A.QueryBuilderIcon = styled(QueryBuilderIcon)`
color: ${(props) => props.coloricon};
`
答案 2 :(得分:0)
您可以在keyboardIcon
组件中使用<KeyboardDatePicker
道具
<KeyboardDatePicker
margin="normal"
id="date-picker-dialog"
format="MM/dd/yyyy"
value={selectedDate}
onChange={handleDateChange}
KeyboardButtonProps={{
'aria-label': 'change date',
}}
keyboardIcon={<img src="https://.../calendar.png" alt="calendar" width="33px" height="33px"/>}
/>
您还可以在此keyboardIcon
属性内使用一个外部标签(不仅限于<img />
):
<svg>
<Icon>
(来自材料ui)<div>