2

I'm trying to change the border color of the Autocomplete on hover, the default is black. I already tried to override the .MuiAutocomplete-root class:

.MuiAutocomplete-root fieldset:hover{
    border-color: #2196F3;
}

But it still black

Here's an example:

import React from "react";
import TextField from "@material-ui/core/TextField";
import Autocomplete from "@material-ui/lab/Autocomplete";

export default function ComboBox() {
  return (
    <Autocomplete
      id="combo-box-demo"
      options={top100Films}
      getOptionLabel={option => option.title}
      style={{ width: 300 }}
      renderInput={params => {
        return (
          <TextField
            {...params}
            label="Combo box"
            variant="outlined"
            fullWidth
          />
        );
      }}
    />
  );
}

const top100Films = [
  { title: "The Shawshank Redemption", year: 1994, },
  { title: "The Godfather", year: 1972, },
  { title: "Avatar", year: 2010, },
  // Plus a bunch more
];

CSS

.MuiAutocomplete-root div:first-of-type:hover{
    border-color: #2196F3;
}
Reinaldo Peres
  • 303
  • 2
  • 5
  • 14
  • I guess, you can start with checking [`makeStyles`](https://material-ui.com/styles/basics/#hook-api) to add styles properly for Material elements. I found one interesting answer, similar to this: [Using props to set '&:hover' background-color](https://stackoverflow.com/questions/55008320/using-props-to-set-hover-background-color). – norbitrial Oct 14 '20 at 14:05
  • but how can I use makeStyles if I'm using class? – Reinaldo Peres Oct 14 '20 at 18:13

1 Answers1

0

Have you tried using !important override?

.MuiAutocomplete-root fieldset:hover{
   border-color: #2196F3 !important;
}
Ayabonga Qwabi
  • 306
  • 5
  • 12