如何修改选中状态下Mui Autocomplete Select的轮廓与标签颜色

你之前的sx样式没生效，核心是选择器层级不对、部分目标元素定位不够精准。以下是两种可行的修正方案：

方案一：在Autocomplete的sx里统一配置 #

<Autocomplete
  disablePortal
  options={top100Films}
  sx={{
    width: { sm: "100%", md: 340 },
    // 精准定位下拉图标
    '& .MuiAutocomplete-popupIndicator': {
      color: 'black',
    },
    // 控制输入框边框的所有状态
    '& .MuiOutlinedInput-root': {
      '& fieldset': {
        borderColor: 'black',
      },
      '&:hover fieldset': {
        borderColor: 'black',
        borderWidth: 'thin',
      },
      '&.Mui-focused fieldset': {
        borderColor: 'black',
        borderWidth: 'thin',
      },
    },
    // 控制标签（含收缩状态）的颜色
    '& .MuiInputLabel-root': {
      color: 'black',
      '&.MuiInputLabel-shrink': {
        color: 'black',
      },
    },
    // 控制输入框内的文字颜色
    '& .MuiInputBase-input': {
      color: 'black',
    },
  }}
  renderInput={(params) => (
    <TextField {...params} label="Movie" />
  )}
/>

方案二：拆分样式到TextField的sx中（更直观） #

把输入框相关样式直接写在TextField里，避免多层穿透的优先级问题：

<Autocomplete
  disablePortal
  options={top100Films}
  sx={{
    width: { sm: "100%", md: 340 },
    // 仅在Autocomplete里控制下拉图标
    '& .MuiAutocomplete-popupIndicator': {
      color: 'black',
    },
  }}
  renderInput={(params) => (
    <TextField 
      {...params} 
      label="Movie"
      sx={{
        // 输入框边框样式
        '& .MuiOutlinedInput-root': {
          '& fieldset': { borderColor: 'black' },
          '&:hover fieldset': { borderColor: 'black', borderWidth: 'thin' },
          '&.Mui-focused fieldset': { borderColor: 'black', borderWidth: 'thin' },
        },
        // 标签样式
        '& .MuiInputLabel-root': {
          color: 'black',
          '&.MuiInputLabel-shrink': { color: 'black' },
        },
        // 输入文字颜色
        '& .MuiInputBase-input': { color: 'black' },
      }}
    />
  )}
/>

关键说明 #

• 之前用.MuiSvgIcon-root范围太广，改用MuiAutocomplete-popupIndicator精准定位Autocomplete的下拉图标，不会影响页面其他图标
• 用&保持选择器嵌套关系，提升样式优先级，避免被MUI默认样式覆盖
• 如果仍有样式不生效，可临时在样式值后加!important（比如color: 'black !important'），但优先建议调整选择器层级解决优先级问题

内容的提问来源于stack exchange，提问作者Artiyom Moskalew