如何自定义自动完成标签 - Material UI

Question

我正在使用材料 ui 的自动完成功能，这是默认标签的样子

我想自定义这样的标签。

我该怎么做？谢谢。

            <Autocomplete
              disableCloseOnSelect={true}
              multiple
              options={this.options}
              getOptionLabel={options => options.title}
              value={this.state.value}
              onChange={(e, techs) => {
                this.newValue(techs);
              }}
              renderInput={params => (
                <TextField
                  {...params}
                  variant="outlined"
                  placeholder={Technology}
                  fullWidth
                />
              )}
            ></Autocomplete>

Answer 1

来自自动完成 API 文档的 renderTags 属性：https://material-ui.com/api/autocomplete/

“标签”是 Material UI Chips https://material-ui.com/components/chips/ 因此您可以根据自己的喜好设置单个芯片组件或变体的样式，然后覆盖自动完成的默认标签。

你的芯片样式看起来像

import { makeStyles } from '@material-ui/core/styles';
import Chip from '@material-ui/core/Chip';

export const useStyles = makeStyles((theme) => ({
  root: {
    borderRadius: 0,
    color: labelColor,
    boxSizing: 'border-box',
    border: '1px solid',
    borderColor: '#bddaff',
  }
}));
;

const MyChip = (props) => {
  const classes = useStyles();

  return (
      <Chip
        className={classes.root}
        {...props}
      />
  );
};

然后你覆盖默认芯片

  <Autocomplete
    getOptionLabel={(option) => option.title}
    label
    placeHolder
    multiple
    openOnFocus
    renderInput={(params) => <TextField {...params} label={label} placeholder={placeHolder} />}
    renderTags={(tagValue, getTagProps) => {
      return tagValue.map((option, index) => (
        <MyChip {...getTagProps({ index })} label={option.title} />
      ));
    }}
    {...rest}
  />
);

Answer 2

您可以使用tag CSS class 自定义标签，如下所示。

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

const CustomAutocomplete = withStyles({
  tag: {
    backgroundColor: "#a0a",
    height: 24,
    position: "relative",
    zIndex: 0,
    "& .MuiChip-label": {
      color: "#fff"
    },
    "& .MuiChip-deleteIcon": {
      color: "red"
    },
    "&:after": {
      content: '""',
      right: 10,
      top: 6,
      height: 12,
      width: 12,
      position: "absolute",
      backgroundColor: "white",
      zIndex: -1
    }
  }
})(Autocomplete);

export default function Tags() {
  return (
    <div style={{ width: 500 }}>
      <CustomAutocomplete
        multiple
        id="tags-standard"
        options={top100Films}
        getOptionLabel={option => option.title}
        defaultValue={[top100Films[13]]}
        renderInput={params => (
          <TextField
            {...params}
            variant="standard"
            label="Multiple values"
            placeholder="Favorites"
            margin="normal"
            fullWidth
          />
        )}
      />
    </div>
  );
}


// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
const top100Films = [
  { title: "The Shawshank Redemption", year: 1994 },
  { title: "The Godfather", year: 1972 },
  { title: "The Godfather: Part II", year: 1974 },
// ... plus many more
];