我正在使用Material UI的Autocomplete/TextField，我想在悬停时以及文本字段处于焦点状态时覆盖其默认CSS。
默认CSS：Image for default CSS in focused state
当输入框处于焦点状态时，我想更改此蓝色。
我试过使用ThemeProvider/createTheme钩子，但它没有帮助。createTheme代码如下：

import { ThemeProvider, createTheme } from "@mui/material/styles";

const overrideTheme = createTheme({
  overrides: {
    MuiInput: {
      root: {
        "&$focused": {
          borderColor: "red",
        },
      },
    },
  },
});
export default function AutocompleteComponent() {
return (
    <ThemeProvider theme={overrideTheme}>
 <Autocomplete
          classes={classes}
          freeSolo
          id="free-solo-2-demo"
          options={
            autocompleteResult ? top100Films.map((option) => option.title) : []
          }
          renderInput={(params) => (
            <TextField
              variant="outlined"
              {...params}
              placeholder="Search..."
              InputProps={{
                ...params.InputProps,
                type: "search",
                classes: {
                  root: classes.root,
                  notchedOutline: classes.notchedOutline,
                },
                className: classes.input,
                endAdornment: false,
              }}
            />
          )}
        />
 </ThemeProvider>
 );
}