MUI Autocomplete组件下拉列表字体为白色样式故障问题咨询

问题根因 #

MUI Autocomplete组件的下拉选项默认使用<li>标签渲染，你项目中设置的全局li元素样式（你提到的li { font-color: white }属于CSS写法错误，实际生效的规则应为li { color: white }）直接作用到了下拉选项上，导致白色字体和浅色下拉背景重合无法看清，你设置的body { background-color: "#fafbff" }确实和该问题无关。
问题表现截图：

排查步骤 #

• 打开浏览器开发者工具，选中Autocomplete下拉列表中的任意一个选项元素，查看「样式」面板，确认color属性的来源规则，可直接定位是否是你的全局li样式导致。
• 找到你项目中写li标签样式的文件，确认该样式是否未做作用域隔离、全局生效。

解决方案 #

方案1（推荐）：隔离全局li样式 #

如果你的li样式仅需要在特定组件内生效，给对应组件的样式做作用域隔离即可：

• React项目：使用CSS Module、styled-components/emotion，或者给需要设置样式的li添加专属类名，再针对类名设置样式，不要直接针对全局li标签设置样式。
• Vue项目：给组件的style标签添加scoped属性，让样式仅在当前组件内生效。

方案2：单独覆盖Autocomplete选项样式 #

如果暂时无法修改全局li样式，可以直接给Autocomplete组件单独设置选项颜色，两种实现方式可选：

1. 使用renderOption自定义选项样式，原有其他属性保持不变：

export default function FreeSolo() {
  return (
    <Stack spacing={2} sx={{ width: 300 }}>
      <Autocomplete
        id="free-solo-demo"
        freeSolo
        options={top100Films.map((option) => option.title)}
        renderOption={(props, option) => (
          <li {...props} sx={{ color: '#1a1a1a' }}>
            {option}
          </li>
        )}
        renderInput={(params) => <TextField {...params} label="freeSolo" />}
      />
      <Autocomplete
        freeSolo
        id="free-solo-2-demo"
        disableClearable
        options={top100Films.map((option) => option.title)}
        renderOption={(props, option) => (
          <li {...props} sx={{ color: '#1a1a1a' }}>
            {option}
          </li>
        )}
        renderInput={(params) => (
          <TextField
            {...params}
            label="Search input"
            InputProps={{
              ...params.InputProps,
              type: "search",
            }}
          />
        )}
      />
    </Stack>
  );
}

2. 用sx属性直接匹配MUI内置类名覆盖样式：

<Autocomplete
  // 其他原有属性不变
  sx={{
    '& .MuiAutocomplete-option': {
      color: '#1a1a1a'
    }
  }}
/>

内容的提问来源于stack exchange，提问作者Davi Cheli Miquelim