How to style react material ui select component height

Question

I'm working on a select component whose height cannot be decreased. Below is the screenshot

I want the Select component height to be as that of the Autocomplete component i.e Project levels

I can make this happen by adding, padding in the HTML div element by inspecting. But, how to add that padding to the component is unknown. This is the HTML what I see for the components I have added.

<div class="MuiInputBase-root MuiOutlinedInput-root" style="width: 300px;"><div class="MuiSelect-root MuiSelect-select MuiSelect-selectMenu MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input" tabindex="0" role="button" aria-haspopup="listbox" aria-labelledby="combo-box-demo" id="combo-box-demo" style="
    padding: 8px; //**** here I have added padding to fix the issue ****
">a134</div>
...
...
...

After adding padding=8px, The problem was solved temporarily.

the problem code was there in code sanbox https://codesandbox.io/s/great-hill-ywql0?file=/App.js

reference code

import React from "react";
import "./styles.css";
import Select from "@material-ui/core/Select";
import MenuItem from "@material-ui/core/MenuItem";
import ListItemText from "@material-ui/core/ListItemText";
import Checkbox from "@material-ui/core/Checkbox";
import Autocomplete from "@material-ui/lab/Autocomplete";
import TextField from "@material-ui/core/TextField";
import Button from "@material-ui/core/Button";

export default function App() {
  return (
    <div
      style={{
        display: "flex",
        flexDirection: "row",
        padding: "10px",
        paddingLeft: 0
      }}
    >
      <Select
        variant="outlined"
        style={{ width: 300 }}
        multiple="true"
        value={[]}
        onChange={this.handleProjectName}
        onClose={this.handleProjectName_close}
        id="combo-box-demo"
        renderValue={(selected) => selected.join(", ")}
      >
        <MenuItem value="">
          <em>Select</em>
        </MenuItem>
        {[{ id: 1, name: "a" }].map((item) => (
          <MenuItem key={item.id} value={item.name}>
            <Checkbox checked={[false]} />
            <ListItemText primary={item.name} />
          </MenuItem>
        ))}
      </Select>

      <Autocomplete
        size="small"
        value={[]}
        onChange={this.handleProjectLevel}
        id="combo-box-demo"
        options={[]}
        getOptionLabel={(option) => option.level}
        style={{ width: 300, marginLeft: 10 }}
        renderInput={(params) => (
          <TextField {...params} label="Project levels" variant="outlined" />
        )}
      />

      <Button
        variant="outlined"
        color="primary"
        disabled={![]}
        style={{ marginLeft: 10 }}
        onClick={this.handleProjectReport}
      >
        {" "}
        Submit
      </Button>
    </div>
  );
}

Answer 1

Use the SelectDisplayProps prop. You can also pass down className or classes to make this work.

const { Select, MenuItem } = MaterialUI

function App() {
  return (
    <div>
      <Select
        SelectDisplayProps={{ style: { paddingTop: 8, paddingBottom: 8 } }}
        variant="outlined"
        style={{ width: 300 }}
        multiple
        value={[]}
        renderValue={(selected) => selected.join(", ")}
      >
        <MenuItem value="">
          <em>Select</em>
        </MenuItem>
      </Select>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('root'))

<script src="https://unpkg.com/react@latest/umd/react.development.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/react-dom@latest/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@material-ui/core@latest/umd/material-ui.development.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/babel-standalone@latest/babel.min.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
<div id="root"></div>