Ниже приведен пример, показывающий три разных значка для Select
. Первый используется по умолчанию, второй явно переопределяется с помощью пропеллера, а третий использует переопределение пропуска значка по умолчанию, указанное в пользовательской теме. Создание темы ничем не отличается от примера в вашем вопросе, за исключением того, что 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>
);
}
