Custom IconComponent in MuiSelect

问题

Is it possible to change the default IconComponent="ArrowDropDownIcon" to CustomIcon using props in createMuiTheme? I would like to get something like this:

const theme = createMuiTheme({
    ...
    props: {
        MuiSelect: {
            IconComponent: "CustomIcon",
        },
    },
    ...
});

回答1:

Below is an example showing three different icons for the Select. The first is the default, the second is explicitly overridden using the prop, and the third leverages the default icon prop override specified in a custom theme. The creation of the theme is no different than the example in your question, except that the IconComponent points at an imported icon component (AssignmentReturnedIcon) rather than a string.

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>
  );
}

来源：https://stackoverflow.com/questions/59818900/custom-iconcomponent-in-muiselect

标签

reactjs

material-ui