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

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

How can I do this?

1 Answer

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 options={top100Films} getOptionLabel={(option) => option.title} style={{ width: 300 }} PaperComponent={CustomPaper} renderInput={(params) => ( <TextField {...params} label="Combo box" variant="outlined" /> )} /> );
}

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 options={top100Films} getOptionLabel={(option) => option.title} style={{ width: 300 }} classes={{ paper: classes.paper }} renderInput={(params) => ( <TextField {...params} label="Combo box" variant="outlined" /> )} /> );
}

3

Your Answer

Sign up or log in

Sign up using Google Sign up using Facebook Sign up using Email and Password Submit

Post as a guest

Post Your Answer Discard

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy