如何更改material-ui/lab/Autocomplete的背景颜色

Question

对于你们中的一些人来说，这应该很容易。我正在尝试将自动完成的背景颜色从黑色更改为白色。它现在看起来像这样：

所以我想改变结果的背景颜色。代码看起来像这样 rn:

<Autocomplete
                            id="combo-box-demo"
                            options={mitarbeiter}
                            classes={{
                                option: styles.option
                            }}
                            onChange={changer}
                            getOptionLabel={(option) => option.email}
                            fullWidth
                            style={{width: 350}}
                            renderInput={(params) => <TextField {...params} label="Mitarbeiter" variant="outlined" style={{ backgroundColor: "cyan !important" }}/>}
                            required
                        />

提前致谢

Answer 1

Autocomplete 组件有一个名为PaperComponent 的道具。您可以使用它更改结果的背景。

在这里，我在PaperComponent 属性中传递了一个Paper 组件，并将其background 设置为yellow。 我的结果列表将在其中呈现，下拉列表的颜色将为yellow

      <Autocomplete
        id="combo-box-demo"
        options={mitarbeiter}
        onChange={() => {}}
        getOptionLabel={(option) => option.title}
        fullWidth
        PaperComponent={({ children }) => (
          <Paper style={{ background: "yellow" }}>{children}</Paper>
        )}
        style={{ width: 350 }}
        renderInput={(params) => (
          <TextField
            {...params}
            label="Mitarbeiter"
            variant="outlined"
            style={{ backgroundColor: "pink !important" }}
          />
        )}
        required
      />

这是一个工作示例@codeandbox https://codesandbox.io/s/wizardly-frost-9cj0v?file=/src/App.js

如果您需要设置额外的styles，您可以添加到<Paper> 组件的样式属性中。