Autocomplete组件警告色仅聚焦时生效，求可行解决方案

方法1：自定义CSS覆盖默认样式 #

通过全局样式或组件内的styled方案，修改Autocomplete在error状态下的输入框样式，移除默认的:focus限制：

/* 全局样式示例 */
.MuiAutocomplete-root.Mui-error .MuiOutlinedInput-notchedOutline {
  border-color: #d32f2f; /* MUI默认错误色，也可替换为自定义色值 */
}

.MuiAutocomplete-root.Mui-error:hover .MuiOutlinedInput-notchedOutline {
  border-color: #d32f2f;
}

如果使用MUI的styled工具封装组件：

import { Autocomplete, styled } from '@mui/material';

const StyledAutocomplete = styled(Autocomplete)(({ theme }) => ({
  '&.Mui-error .MuiOutlinedInput-notchedOutline': {
    borderColor: theme.palette.error.main,
  },
  '&.Mui-error:hover .MuiOutlinedInput-notchedOutline': {
    borderColor: theme.palette.error.main,
  },
}));

// 使用时替换原Autocomplete组件
<StyledAutocomplete error {...yourProps} />

方法2：通过InputProps传递自定义输入组件 #

给Autocomplete的InputProps传入自定义配置的OutlinedInput，直接指定error状态下的边框样式：

import { Autocomplete, OutlinedInput } from '@mui/material';

<Autocomplete
  error
  InputProps={{
    inputComponent: (props) => (
      <OutlinedInput
        {...props}
        sx={{
          '&.Mui-error .MuiOutlinedInput-notchedOutline': {
            borderColor: 'error.main',
          },
          '&.Mui-error:hover .MuiOutlinedInput-notchedOutline': {
            borderColor: 'error.main',
          },
        }}
      />
    ),
  }}
  {...yourProps}
/>

原理说明 #

这类Autocomplete组件（以MUI为例）的默认错误样式仅在输入框聚焦时生效，是因为内置CSS选择器限定了:focus状态。通过覆盖Mui-error类对应的输入框边框规则，就能让警告色在任何状态下持续显示。

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