材质 UI 自动完成清除图标样式

Question

我想更改清除图标的颜色，我尝试过this，但它会删除带有静态图标的图标。我只是想改变颜色。

        <Autocomplete className={`${commonClasses.searchBarMobileScreen}`}
          id="product-search"
          forcePopupIcon={false}
          classes={searchTextColor()}
          options={options.sort((a, b) => -b.name.localeCompare(a.name))}
          groupBy={(option) => option.cid}
          getOptionLabel={(option) => (`${option.brand} ${option.name}`)}
          renderInput={(params) => <SearchTextField
            fullWidth
            {...params}
            label="Search..."
            variant="outlined"
            InputLabelProps={{
              classes: {
                root: commonClasses.whiteColor,
              }
            }}
          />}
        />

Answer 1

您可以向 clearIndicator 添加一些样式。全局类是.MuiAutocomplete-clearIndicator

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Autocomplete from "@material-ui/lab/Autocomplete";
import TextField from "@material-ui/core/TextField";

const useStyles = makeStyles((theme) => ({
  inputRoot: {
    color: "blue",
    fontFamily: "Roboto Mono",
    backgroundColor: "#f2f2f2",
    "& .MuiOutlinedInput-notchedOutline": {
      borderWidth: "2px",
      borderColor: "blue"
    },
    "&:hover .MuiOutlinedInput-notchedOutline": {
      borderWidth: "2px",
      borderColor: "blue"
    },
    "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
      borderWidth: "2px",
      borderColor: "blue"
    }
  },
  clearIndicator: {
    color: "red"
  }
}));

export default function ComboBox() {
  const classes = useStyles();

  return (
    <Autocomplete
      id="combo-box-demo"
      classes={classes}
      options={[1,2,3]}
      forcePopupIcon
      getOptionLabel={(option) => option.title}
      renderInput={(params) => {
        return (
          <TextField
            {...params}
            label="Combo box"
            variant="outlined"
            fullWidth
          />
        );
      }}
    />
  );
}