是否可以使用createMuiTheme 中的props将默认IconComponent="ArrowDropDownIcon"更改为CustomIcon?我想得到这样的东西:
const theme = createMuiTheme({
...
props: {
MuiSelect: {
IconComponent: "CustomIcon",
},
},
...
});
是否可以使用createMuiTheme 中的props将默认IconComponent="ArrowDropDownIcon"更改为CustomIcon?我想得到这样的东西:
const theme = createMuiTheme({
...
props: {
MuiSelect: {
IconComponent: "CustomIcon",
},
},
...
});
下面是一个示例,显示了三个不同的 图标Select。第一个是默认值,第二个是使用 prop 显式覆盖的,第三个利用自定义主题中指定的默认图标 prop 覆盖。主题的创建与您问题中的示例没有什么不同,只是IconComponent指向导入的图标组件 ( AssignmentReturnedIcon) 而不是字符串。
import React from "react";
import {
makeStyles,
createMuiTheme,
ThemeProvider
} from "@material-ui/core/styles";
import InputLabel from "@material-ui/core/InputLabel";
import MenuItem from "@material-ui/core/MenuItem";
import FormControl from "@material-ui/core/FormControl";
import Select from "@material-ui/core/Select";
import AssignmentReturnedIcon from "@material-ui/icons/AssignmentReturned";
import ArrowDownwardIcon from "@material-ui/icons/ArrowDownward";
const theme = createMuiTheme({
props: {
MuiSelect: {
IconComponent: AssignmentReturnedIcon
}
}
});
const useStyles = makeStyles(theme => ({
formControl: {
margin: theme.spacing(1),
minWidth: 120
},
selectEmpty: {
marginTop: theme.spacing(2)
}
}));
export default function SimpleSelect() {
const classes = useStyles();
const [age, setAge] = React.useState("");
const handleChange = event => {
setAge(event.target.value);
};
return (
<div>
<FormControl className={classes.formControl}>
<InputLabel id="demo-simple-select-label-default">Default</InputLabel>
<Select
labelId="demo-simple-select-label-default"
id="demo-simple-select-default"
value={age}
onChange={handleChange}
>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</FormControl>
<ThemeProvider theme={theme}>
<FormControl className={classes.formControl}>
<InputLabel id="demo-simple-select-label-themeicon">
Explicit Prop
</InputLabel>
<Select
labelId="demo-simple-select-label-themeicon"
id="demo-simple-select-themeicon"
value={age}
onChange={handleChange}
IconComponent={ArrowDownwardIcon}
>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</FormControl>
<FormControl className={classes.formControl}>
<InputLabel id="demo-simple-select-label-expliciticon">
Theme Prop
</InputLabel>
<Select
labelId="demo-simple-select-label-expliciticon"
id="demo-simple-select-expliciticon"
value={age}
onChange={handleChange}
>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</FormControl>
</ThemeProvider>
</div>
);
}