时间戳

首页 > 解决方案 > 样式材质 UI 自动完成的选项背景颜色

css - 样式材质 UI 自动完成的选项背景颜色

问题描述

我想更改 Material UI Autocomplete 组件中下拉选项背后的颜色。

我已经查看了以下来源，但它们仅描述了如何使用renderOption道具来呈现选项文本本身，这会导致如下图所示：

dropdown_option_with_only_text_colored

相反，我希望整个选项矩形是某种颜色。包含下拉选项的整个矩形将是颜色，而不仅仅是围绕选项文本的一点点。我希望这需要一些智能的 css 样式，因为它似乎没有作为 Autocomplete 组件的道具提供，但我无法弄清楚要更改的正确语法/规则。

如果您还解释了如何将其作为全局覆盖来完成，那么您将获得奖励。即使在扩展默认主题之后，我也无法像这样添加覆盖。（看看为什么在这里扩展主题是必要的。）

标签： cssreactjstypescriptmaterial-ui

解决方案

您可以使用 Autocomplete 的 classes 属性来做到这一点。

查看https://material-ui.com/api/autocomplete/的 CSS 部分

这是一个不完整的示例，希望能帮助您入门。

const useStyles = makeStyles((theme) => ({
    option: {
        backgroundColor: 'red'
    }
}));

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

我不确定您将如何将其作为全局覆盖来执行。

推荐阅读