在 Material UI 自动完成中更改底部边框和下拉箭头的颜色

Question

我想把 'Search' 下面的线和右边的箭头变成白色，但我一直不知道该怎么做。我试过在 .MuiAutocomplete-root css class 上使用样式，但它没有用。我不知道要将颜色应用于哪个 CSS class。如果我检查它，它说 class 是 MuiInput-root 我也尝试过样式化但也没有用。

谢谢

我的代码（从文档复制粘贴并稍作调整）：

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

为以下CSS添加颜色类.

.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;
}

玩转代码 here

我在 codesandbox 示例中使用了红色，以便在白屏上可以看到它

在 Material UI 自动完成中更改底部边框和下拉箭头的颜色

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

css

reactjs

material-ui