https://i.stack.imgur.com/oXKQm.png
I'm struggling to figure out how to change the color of the line underneath 'Search' and the arrow on the right to white. I've tried applying styles to the .MuiAutocomplete-root css class, but it didn't work. Inspecting the code, it seems like the class is MuiInput-root, but even styling that didn't produce the desired result.
Any help would be greatly appreciated. Thanks!
Below is my code, mostly copied from the documentation 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"
InputLabelProps={{
style: {color: '#fff'},
}}
InputProps={{
...params.InputProps,
sx: {color: '#fff'},
endAdornment: (
<>
{loading ? <CircularProgress color="inherit" size={20}/> : null}
{params.InputProps.endAdornment}
</>
),
}}
/>
)}
/>
);
}