Пользовательский IconComponent в MuiSelect - PullRequest
1 голос
/ 20 января 2020

Можно ли изменить значение по умолчанию IconComponent = "ArrowDropDownIcon" на CustomIcon , используя реквизиты в createMuiTheme ? Я хотел бы получить что-то вроде этого:

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

1 Ответ

1 голос
/ 20 января 2020

Ниже приведен пример, показывающий три разных значка для 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>
  );
}

Edit Default Select icon in theme

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...