I'm attempting to modify the hover border color of the Autocomplete, which defaults to black. I have already attempted to override the .MuiAutocomplete-root class:
.MuiAutocomplete-root fieldset:hover{
border-color: #2196F3;
}
However, it is still remaining black
Here is 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;
}