CODEWITHSUNDEEP
cssreactjsmaterial-ui
Sunny Hebbar
Sunny Hebbar

Reputation: 175

Customize Autocomplete CSS when value is present in the TextField in React Material UI

I'm using React Material Autocomplete fields in my project that has a nested TextField. I've currently applied standard styles to it (when no value is present and just the label is showing in the field), and also different styles on hover. However, I want the same hover styles to be applied to the whole Autocomplete box (not just the TextField element) if the TextField has a value in it, but I'm unable to figure out how to do this. My Autocomplete code and current CSS styles are below. Please could anybody help and let me know how I can do 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,
        },
        // 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',
        },
    },
});

Upvotes: 1

Views: 2082

Answers (1)

Sunny Hebbar
Sunny Hebbar

Reputation: 175

I've managed to resolve the issue. I had to create a new class for the desired style when a value was present and conditionally render it in the Autcomplete element, based on the relevant state.

To conditionally render the class, I had to pass in stateVal as one of the props in my function and then change the root line in the Autocomplete classes property to root: stateVal ? classes.rootHasVal : classes.rootHasNoVal, instead.

Upvotes: 1

Related Questions