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

Question

我们想更改Material-ui自动完成组件上的文本颜色，轮廓和填充。

代码如下：

              <FormControlLabel
                label="Please enter desired service:"
                labelPlacement="start"
                control={
                  <Autocomplete
                    id="services"
                    options={props.serviceTypes}
                    getOptionLabel={option => option.name}
                    className={classes.inputRoot}
                    style={{ width: 400, paddingLeft: 20 }}
                    renderInput={params => (
                      <TextField
                        {...params}
                        label=""
                        className={classes.inputRoot}
                        variant="outlined"
                        fullWidth
                      />
                    )}
                    onChange={setService}
                  />
                }
              />

我们可以通过这样的代码更改TextInput颜色

                        InputProps={{
                          className: classes.inputColor
                        }}

但是以这种方式应用样式会影响“自动完成”功能（它会失去自动完成功能，其行为类似于普通的TextField）。

我们尝试了许多样式和className选项都无济于事。

感谢任何建议。

Answer 1

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

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
];