Select位置调整.js

import React from "react";
import { css, cx } from "emotion";
import InputLabel from "@material-ui/core/InputLabel";
import MenuItem from "@material-ui/core/MenuItem";
import { createMuiTheme, ThemeProvider } from "@material-ui/core/styles";
import FormControl from "@material-ui/core/FormControl";
import Select from "@material-ui/core/Select";
const theme = createMuiTheme({
  overrides: {
    // Style sheet name ⚛️
    MuiPaper: {
      // Name of the rule
      elevation8: {
        // Some CSS
        boxShadow: "none",
      },
      rounded: {
        borderRadius: 0,
      },
    },
  },
});
export default function SimpleSelect(props) {
  const { age } = props;
  function handleChange(event) {
    console.log(event.target.value);
  }
  return (
    <FormControl>
      <InputLabel id="demo-simple-select-label">Age</InputLabel>
      <ThemeProvider theme={theme}>
        <Select
          MenuProps={{
            anchorOrigin: {
              vertical: "bottom",
              horizontal: "center",
            },
            transformOrigin: {
              vertical: "top",
              horizontal: "center",
            },
            getContentAnchorEl: null,
          }}
          value={age}
          onChange={handleChange}
          className={css`
            width: 150px;
          `}
        >
          <MenuItem value={10}>Ten</MenuItem>
          <MenuItem value={20}>Twenty</MenuItem>
          <MenuItem value={30}>Thirty</MenuItem>
        </Select>
      </ThemeProvider>
    </FormControl>
  );
}

两个：1，select popover 弹出位置在正下方。2，popover border-radius 调整。