In my current project, I am utilizing React Material Autocomplete fields, which includes a nested TextField. I have successfully implemented standard styles for when the field is empty and only the label is visible, as well as different styles for hover effects. However, I am facing a challenge in applying the same hover styles to the entire Autocomplete box (not just the TextField element) when the TextField contains a value. I am struggling to find a solution for this issue. Below is the code for my Autocomplete component and the CSS styles that are currently in use. Can anyone provide assistance on how I can achieve this?
Autocomplete Code
const renderComponentList = (componentList, isDisabled, name, label) => (
componentList &&
<Autocomplete
classes={{
root: classes.root,
}}
options={componentList}
disabled={isDisabled}
name={name}
getOptionLabel={(option) => option.name}
onChange={
(event, value, reason) => {
this.handleAutocompleteChange(name, value);
}
}
style={{width: '100%'}}
renderInput={
(params) =>
<TextField
{...params}
name={name}
label={label}
variant="outlined"
/>
}
/>
);
CSS Styles
export const styles = theme => ({
// Autocomplete option styles
root: {
color: '#FFFFFF',
backgroundColor: '#303039',
opacity: 0.6,
"&:hover": {
backgroundColor: '#1E1E24',
borderRadius: '5px',
opacity: 1,
},
"&:focus-within": {
backgroundColor: '#1E1E24',
borderRadius: '5px',
opacity: 1,
},
// Need help with styling the Autocomplete when the input has a value, not working as intended
// "& input[value]:not([value=''])": {
// backgroundColor: '#1E1E24',
// borderRadius: '5px',
// opacity: 1,
// },
"& .MuiOutlinedInput-notchedOutline": {
border: '1px solid #484850',
},
"&:hover .MuiOutlinedInput-notchedOutline": {
border: '1px solid #484850',
},
"&.Mui-focused .MuiOutlinedInput-notchedOutline": {
border: '1px solid #484850',
borderRadius: '5px 5px 0 0',
},
"& .MuiInputLabel-outlined": {
color: '#FFFFFF',
},
"& .Mui-disabled": {
opacity: 0.6,
},
"& .Mui-disabled .MuiOutlinedInput-notchedOutline": {
border: '1px solid #484850',
},
},
});