CODEWITHSUNDEEP
reactjsmaterial-ui
BlackWooDZZ
BlackWooDZZ

Reputation: 23

How to override the style or CSS of an Material UI autocomplete options?

Is there a way to change the padding of the options in an Material UI autocomplete Dropdown List? I would like to remove the padding from all the list items from the dropdown. Sample Image of the code

Here is the CodeSandbox. https://codesandbox.io/s/custom-paper-in-autocomplete-forked-ntef9?file=/demo.js

Upvotes: 0

Views: 3281

Answers (2)

Gaurav Vichare
Gaurav Vichare

Reputation: 1183

You can override option css using makestyles.

Autocomplete component has classes prop, using which you can override.

Define style for option

const useStyles = makeStyles({
  option: {
    padding: "0px",
    margin: "1px !important"
  }
});

_

const classes = useStyles();

And then

<Autocomplete
  classes={{
    option: classes.option
  }}
  .
  .
  .
/>

Updated Sandbox

Ref: https://material-ui.com/customization/components/#overriding-styles-with-classes

Upvotes: 1

Shivam Jha
Shivam Jha

Reputation: 4462

You can inspect the sandbox and then add the styling in a stylesheet.

Here is the edited sandbox link

Upvotes: 0

Related Questions