Change color of bottom border and dropdown arrow in Material UI Autocomplete

Question

I want to make the line underneath 'Search' and the arrow on the right white but I can't figure out how to do it for the life of me. I've tried using styled on the .MuiAutocomplete-root css class but it didn't work. I can't figure out which CSS class to apply the color to. If I inspect it, it says that the class is MuiInput-root which I also tried with styled and that didn't work either.

Thanks

My code (copy pasted from the docs with some minor adjustments):

function sleep(delay = 0) {
    return new Promise((resolve) => {
        setTimeout(resolve, delay);
    });
}

export default function AutocompleteSearch() {
    const [open, setOpen] = useState(false);
    const [options, setOptions] = useState([]);
    const loading = open && options.length === 0;
    
    useEffect(() => {
        let active = true;

        if (!loading) {
            return undefined;
        }

        (async () => {
            await sleep(1e3); // For demo purposes.

            if (active) {
                //api call then setOptions
            }
        })();

        return () => {
            active = false;
        };
    }, [loading]);

    useEffect(() => {
        if (!open) {
            setOptions([]);
        }
    }, [open]);

    return (
        <Autocomplete
            id="size-small-standard"
            size="small"
            sx={{
                width: 300,
                
            }}
            open={open}
            onOpen={() => {
                setOpen(true);
            }}
            onClose={() => {
                setOpen(false);
            }}
            isOptionEqualToValue={(option, value) => option.title === value.title}
            getOptionLabel={(option) => option.title}
            options={options}
            groupBy={(option) => option.type}
            loading={loading}
            renderInput={(params) => (
                <TextField
                    {...params}
                    variant="standard"
                    label="Search"
                    //makes label white
                    InputLabelProps={{
                        style: {color: '#fff'},
                    }}
                    InputProps={{
                        ...params.InputProps,
                        //makes the selected option white when added to the box
                        sx: {color: '#fff'},
                        endAdornment: (
                            <>
                                {loading ? <CircularProgress color="inherit" size={20}/> : null}
                                {params.InputProps.endAdornment}
                            </>
                        ),
                    }}
                />
            )}
        />
    );
}

Answer 1

Add color to the following CSS classes.

.MuiSvgIcon-root {
  color: white;
}
.css-ghsjzk-MuiInputBase-root-MuiInput-root:before {
  border-bottom-color: white !important;
}
.css-ghsjzk-MuiInputBase-root-MuiInput-root:after {
  border-bottom-color: white !important;
}

Play around with the code here

I used red color in my codesandbox example so that it can be visible on white screen