如何更改Material-UI自动完成列表的样式？

Question

我想更改Material-UI中自动完成组件的列表/下拉列表（不是输入）的样式。 我正在使用材质样式进行造型。

我希望这个列表从背景中更明显，所以也许可以增加盒子阴影。

我该怎么做？

Answer 1

实现此目的的一种方法是调整

elevation

使用的

Paper

组件的

Autocomplete

。默认高度为 1。下面的示例通过在自定义

Paper

组件 (

CustomPaper

) 中指定该值来使用值 8，然后通过

PaperComponent

的

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" />
      )}
    />
  );
}

如果

elevation

属性没有给您想要的外观，您可以通过

classes

的

Autocomplete

属性自定义 Paper 组件的样式，如下例所示，该示例使用非常丑陋的边框进行演示，但是您可以使用相同的方法进行任何您想要的 CSS 更改。

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" />
      )}
    />
  );
}

Answer 2

我们现在可以通过在主题中执行以下操作来更改纸张的高度或其他默认道具：

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

Answer 3

上面的答案不会使用使用“sx”属性的常见方法来修改自动完成的样式。令人困惑的是，自动完成下拉列表不是自动完成组件的子项。您需要将“disablePortal”与“& + .MuiAutocomplete-popper”结合使用。

例如：

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