Create the below styles in your ReactJS component:
const styles = (theme) => ({
////....
option: {
// Hover
with light-grey
'&[data-focus="true"]': {
backgroundColor: '#F8F8F8',
borderColor: 'transparent',
},
// Selected
has dark-grey
'&[aria-selected="true"]': {
backgroundColor: theme.palette.grey.A200,
borderColor: 'transparent',
},
},
});
You can choose the colors based on your preference on selected and for mouse-over for backgroundColor property.
Add the following property in your AutoComplete component
classes={{
option: classes.option
}}
as shown below:
<Autocomplete
id="combo-box-1"
options={myvalues}
getOptionLabel={(option) => option.value}
size="small"
className={classes.formControlAutopopulate}
classes={{
option: classes.option
}}
value={myvalues.find((x) => x.id === this.state.ID)}
disabled={this.props.isLocked}
onChange={this.handleSelected}
renderInput={(params) => (
<TextField
{...params}
variant="outlined"
placeholder="Please Select Value"
fullWidth
/>
)}
/>