如何覆盖 Material UI 自动完成选项的样式或 CSS？

Question

有没有办法更改 Material UI 自动完成下拉列表中选项的填充？ 我想从下拉列表中的所有列表项中删除填充。 Sample Image of the code

这是 CodeSandbox。 https://codesandbox.io/s/custom-paper-in-autocomplete-forked-ntef9?file=/demo.js

Answer 1

您可以检查 然后在样式表中添加样式。

这是edited sandbox link

Answer 2

您可以使用 option 覆盖 makestyles css。

Autocomplete 组件具有 classes prop，您可以使用它来覆盖。

定义选项的样式

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

_

const classes = useStyles();

然后

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

Updated Sandbox

参考：https://material-ui.com/customization/components/#overriding-styles-with-classes