CODEWITHSUNDEEP
reactjsmaterial-ui
Mimoid
Mimoid

Reputation: 822

How to change styles of Material-UI Autocomplete list?

I want to change styles of list/dropdown (not the input) of Autocomplete component in Material-UI. I'm using material-styles for styling.

enter image description here

I would like this list to be more visible from the background so maybe increase the box-shadow.

How can I do this?

Upvotes: 15

Views: 38341

Answers (3)

Colin McGovern
Colin McGovern

Reputation: 124

The answers already given do not modify the style of the autocomplete with the common method of using the sx prop. The autocomplete dropdown is confusingly not a child of the Autocomplete component, therefore one must use disablePortal combined with & + .MuiAutocomplete-popper to style the dropdown

For example:

<Autocomplete
  disablePortal
  sx={{
    '& + .MuiAutocomplete-popper .MuiAutocomplete-option': {          
      backgroundColor: 'red'
    }
  }}
  ...
/>

Upvotes: 0

Frank Egan
Frank Egan

Reputation: 146

We are now able to change elevation or other default props of the paper by doing this in the theme:

MuiAutocomplete: {
  defaultProps: {
    slotProps: {
      paper: {
        elevation: 6
      }
    }
  }
}

Upvotes: 0

Ryan Cogswell
Ryan Cogswell

Reputation: 81106

One way of doing this is by adjusting the elevation of the Paper component used by Autocomplete. The default elevation is 1. The example below uses a value of 8 by specifying that in a custom Paper component (CustomPaper) which is then provided via the PaperComponent prop of Autocomplete.

import React from "react";
import TextField from "@material-ui/core/TextField";
import Autocomplete from "@material-ui/lab/Autocomplete";
import Paper from "@material-ui/core/Paper";

const CustomPaper = (props) => {
  return <Paper elevation={8} {...props} />;
};
export default function ComboBox() {
  return (
    <Autocomplete
      id="combo-box-demo"
      options={top100Films}
      getOptionLabel={(option) => option.title}
      style={{ width: 300 }}
      PaperComponent={CustomPaper}
      renderInput={(params) => (
        <TextField {...params} label="Combo box" variant="outlined" />
      )}
    />
  );
}

Edit Custom Paper in Autocomplete

If the elevation prop does not give you the look you want, you can customize styles of the Paper component via the classes prop of Autocomplete as in the example below which uses a very ugly border for demonstration purposes, but you can make whatever CSS change you want to make using the same approach.

import React from "react";
import TextField from "@material-ui/core/TextField";
import Autocomplete from "@material-ui/lab/Autocomplete";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles({
  paper: {
    border: "5px solid black"
  }
});
export default function ComboBox() {
  const classes = useStyles();
  return (
    <Autocomplete
      id="combo-box-demo"
      options={top100Films}
      getOptionLabel={(option) => option.title}
      style={{ width: 300 }}
      classes={{ paper: classes.paper }}
      renderInput={(params) => (
        <TextField {...params} label="Combo box" variant="outlined" />
      )}
    />
  );
}

Edit Custom Paper in Autocomplete

Upvotes: 26

Related Questions