在Material-ui自动完成组件上设置文本颜色，轮廓和填充 [英] Setting text color, outline, and padding on Material-ui Autocomplete component

问题描述

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

We'd like to change the text color, outline, and padding on a Material-ui Autocomplete component.

代码如下:

              <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颜色

We are able to change the TextInput color via code like this

                        InputProps={{
                          className: classes.inputColor
                        }}

但是以这种方式应用样式会影响自动完成"功能(它将失去自动完成功能，并且其行为类似于普通的TextField).

but applying a style this way impacts the AutoComplete functionality (it loses the autocomplete functionality and behaves like a normal TextField).

我们尝试了许多style和className选项，但无济于事.

We've tried a number of style and className options to no avail.

感谢任何建议.

推荐答案

以下是您尝试过的方法(该方法在样式上一直有效，但破坏了自动完成功能):

Here is the approach you tried (which worked as far as styling, but broke the Autocomplete functionality):

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

上述方法会导致问题，因为Autocomplete组件

The above approach causes problems because the Autocomplete component passes InputProps as part of the params passed to TextField so the InputProps passed explicitly will completely replace the InputProps in params.

相反，您应该将inputRoot CSS类用于自动填充组件 :

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

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

Below is a working example that sets the text color and customizes the outline colors.

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上的边框颜色

这篇关于在Material-ui自动完成组件上设置文本颜色，轮廓和填充的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！