How to customize Autocomplete tag - Material UI

Question

I'm using autocomplete of material ui and this is what default tag looks like

I want to customize tag like this.

How can i do that? Thank you.

            <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

The renderTags prop from the Autocomplete API docs: https://material-ui.com/api/autocomplete/

The "tags" are Material UI Chips https://material-ui.com/components/chips/ so you can style an individual Chip component or variants to your liking and then override the default tags for Autocomplete.

Your styling for the chip would look something like

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}
      />
  );
};

And then you override the default chips

  <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

You can use the tag CSS class to customize the tags as shown below.

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