Material UI autocomplete hover effect remove

user_18769325 0
Viewed 204

there is that annoying black outline that appears in my material Ui autocomplete component on hover and I cannot even find in the css to remove it. I feel like I've tried everything. Does somebody have an idea about it? It just doesn't match the style of my project and the whole page looks bad because of it.

material-ui
2 Answers

You can override the input component using "renderInput". This will allow you to provide a custom input component that does not have the hover effect.

Docs: https://mui.com/material-ui/react-autocomplete/#custom-input

<Autocomplete
    sx={{
      display: 'inline-block',
      '& input': {
        width: 200,
        bgcolor: 'background.paper',
        color: (theme) =>
          theme.palette.getContrastText(theme.palette.background.paper),
      },
    }}
    id="custom-input-demo"
    options={options}
    renderInput={(params) => (
      <div ref={params.InputProps.ref}>
        <input type="text" {...params.inputProps} />
      </div>
    )}
/>
user_126843660

I struggled a lot to remove the hover effect too. In my case could chaneg it using the .MuiInput-underline:hover:not(.Mui-disabled):before selector. I think in your case you could do something like

.MuiInput-underline:hover:not(.Mui-disabled):before {
    border-bottom: 0 !important;
}

or something among those lines. Hope that helps.

user_116710050
Related