reactjsmaterial-uimui-autocomplete

How to customize Autocomplete tag - Material UI


I'm using autocomplete of Material UI and this is what default tag looks like

enter image description here

I want to customize tag like this.

enter image description here

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>

Solution

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

    Edit Material demo