Настройте автозаполнение CSS, когда значение присутствует в TextField в пользовательском интерфейсе React Material

Question

Я использую поля автозаполнения React Material в моем проекте с вложенным TextField. В настоящее время я применил к нему стандартные стили (когда значения отсутствуют, а в поле отображается только метка), а также различные стили при наведении. Однако я хочу, чтобы одни и те же стили наведения были применены ко всему блоку автозаполнения (не только к элементу TextField), если в TextField есть значение, но я не могу понять, как это сделать. Мой код автозаполнения и текущие стили CSS приведены ниже. Кто-нибудь может помочь, и дайте мне знать, как я могу это сделать?

Код автозаполнения

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 Стили

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,
        },
        // Something like this to style the autocomplete when input has a value, but this only
        // targets the input field (TextField) rather than the whole Autocomplete field
        // "& 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',
        },
    },
});

Answer 1

Мне удалось решить проблему. Мне нужно было создать новый класс для желаемого стиля, когда значение присутствовало, и условно отобразить его в элементе Autcomplete, основываясь на соответствующем состоянии.

Чтобы условно отобразить класс, мне пришлось передать stateVal в качестве одного из параметров моей функции, а затем измените строку root в свойстве классов автозаполнения на root: stateVal ? classes.rootHasVal : classes.rootHasNoVal,.