如何更改 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
      />

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

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

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

How can you change the background colour of material-ui/lab/Autocomplete

reactjs

autocomplete

material-ui