在Material-ui自动完成组件上设置文本颜色，轮廓和填充

这是您尝试过的方法（在样式上可以使用，但破坏了自动完成功能）：

renderInput={params => (
    <TextField
       {...params}
       label=""
       InputProps={{
          className: classes.inputColor
       }}
       variant="outlined"
       fullWidth
    />
)}

上面的方法会引起问题，因为Autocomplete组件将InputProps作为params传递的一部分传递给，TextField因此InputProps传递的显式将完全替换InputPropsin params。

相反，您应该将inputRoot CSS类用于Autocomplete组件：

<Autocomplete classes={{inputRoot: classes.inputRoot}} .../>

下面是一个设置文本颜色并自定义轮廓颜色的工作示例。

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

const useStyles = makeStyles(theme => ({
  inputRoot: {
    color: "purple",
    "& .MuiOutlinedInput-notchedOutline": {
      borderColor: "green"
    },
    "&:hover .MuiOutlinedInput-notchedOutline": {
      borderColor: "red"
    },
    "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
      borderColor: "purple"
    }
  }
}));

export default function ComboBox() {
  const classes = useStyles();
  return (
    <Autocomplete
      id="combo-box-demo"
      classes={classes}
      options={top100Films}
      getOptionLabel={option => option.title}
      style={{ width: 300 }}
      renderInput={params => {
        return (
          <TextField
            {...params}
            label="Combo box"
            variant="outlined"
            fullWidth
          />
        );
      }}
    />
  );
}

const top100Films = [
  { title: "The Shawshank Redemption", year: 1994 },
  { title: "The Godfather", year: 1972 },
// Plus a bunch more
];

相关答案：

• 更改Material-UI TextField上的边框颜色