Select

We've decided to leave this component as is from material-ui selects component and just add our style to them.

Styles

You will find the styles for this component in
styles/jss/nextjs-material-kit-pro/customSelectStyle.js.

Example

import React from 'react';
import SyntaxHighlighter from 'react-syntax-highlighter/prism';
import { prism } from 'react-syntax-highlighter/styles/prism';
// material-ui components
import { makeStyles } from "@material-ui/core/styles";
import FormControl from "@material-ui/core/FormControl";
import InputLabel from "@material-ui/core/InputLabel";
import Select from "@material-ui/core/Select";
import MenuItem from "@material-ui/core/MenuItem";
// core components
import GridContainer from "components/Grid/GridContainer.js";
import GridItem from "components/Grid/GridItem.js";

import styles from "styles/jss/nextjs-material-kit-pro/customSelectStyle.js";

const useStyles = makeStyles(styles);

export default function Example(){
  const [simpleSelect, setSimpleSelect] = React.useState("");
  const [multipleSelect, setMultipleSelect] = React.useState([]);
  const handleSimple = event => {
    setSimpleSelect(event.target.value);
  };
  const handleMultiple = event => {
    setMultipleSelect(event.target.value);
  };
  const classes = useStyles();
  return (
    <GridContainer>
      <GridItem xs={12} sm={6} md={5} lg={5}>
        <FormControl fullWidth className={classes.selectFormControl}>
          <InputLabel
            htmlFor="simple-select"
            className={classes.selectLabel}
          >
            Single Select
          </InputLabel>
          <Select
            MenuProps={{
              className: classes.selectMenu
            }}
            classes={{
              select: classes.select
            }}
            value={simpleSelect}
            onChange={handleSimple}
            inputProps={{
              name: "simpleSelect",
              id: "simple-select"
            }}
          >
            <MenuItem
              disabled
              classes={{
                root: classes.selectMenuItem
              }}
            >
              Single Select
            </MenuItem>
            <MenuItem
              classes={{
                root: classes.selectMenuItem,
                selected: classes.selectMenuItemSelected
              }}
              value="2"
            >
              Paris
            </MenuItem>
            <MenuItem
              classes={{
                root: classes.selectMenuItem,
                selected: classes.selectMenuItemSelected
              }}
              value="3"
            >
              Bucharest
            </MenuItem>
            <MenuItem
              classes={{
                root: classes.selectMenuItem,
                selected: classes.selectMenuItemSelected
              }}
              value="4"
            >
              Rome
            </MenuItem>
          </Select>
        </FormControl>
      </GridItem>
      <GridItem xs={12} sm={6} md={5} lg={5}>
        <FormControl fullWidth className={classes.selectFormControl}>
          <InputLabel
            htmlFor="multiple-select"
            className={classes.selectLabel}
          >
            Multiple Select
          </InputLabel>
          <Select
            multiple
            value={multipleSelect}
            onChange={handleMultiple}
            MenuProps={{
              className: classes.selectMenu,
              classes: { paper: classes.selectPaper }
            }}
            classes={{ select: classes.select }}
            inputProps={{
              name: "multipleSelect",
              id: "multiple-select"
            }}
          >
            <MenuItem
              disabled
              classes={{
                root: classes.selectMenuItem
              }}
            >
              Multiple Select
            </MenuItem>
            <MenuItem
              classes={{
                root: classes.selectMenuItem,
                selected: classes.selectMenuItemSelectedMultiple
              }}
              value="2"
            >
              Paris
            </MenuItem>
            <MenuItem
              classes={{
                root: classes.selectMenuItem,
                selected: classes.selectMenuItemSelectedMultiple
              }}
              value="3"
            >
              Bucharest
            </MenuItem>
            <MenuItem
              classes={{
                root: classes.selectMenuItem,
                selected: classes.selectMenuItemSelectedMultiple
              }}
              value="4"
            >
              Rome
            </MenuItem>
          </Select>
        </FormControl>
      </GridItem>
    </GridContainer>
  );
}