时间戳

首页 > 解决方案 > 如何覆盖 Material UI 自动完成选项的样式或 CSS？

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

问题描述

有没有办法更改 Material UI 自动完成下拉列表中选项的填充？我想从下拉列表中的所有列表项中删除填充。 代码示例图片

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

标签： reactjsmaterial-ui

解决方案

您可以使用覆盖optioncss makestyles。

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

定义选项的样式

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

_

const classes = useStyles();

接着

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

更新沙盒

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

推荐阅读