Material UI Chip 数组如何像 Angular Chip Input 一样使用？

Question

是否可以使用 React Material UI Chip array 模拟 Angular Material Chip input 样式输入？

我正在尝试在 React 中启用 Angular Material Chip 输入的简洁外观。 Material UI Chip 数组似乎是最接近的东西，但它似乎并不原生支持输入。是否有可用于获得相同功能的配置？

Answer 1

根据@ryan-cogswell 的评论，使用Autocomplete 和freeSolo 设置会产生类似于Angular Material 的芯片输入的结果。

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

import "./App.css";

export const App: React.FC = () => {
  return (
    <div className="App">
      <Autocomplete
        multiple
        id="tags-filled"
        options={[]}
        freeSolo
        renderTags={(value: string[], getTagProps) =>
          value.map((option: string, index: number) => (
            <Chip
              variant="outlined"
              label={option}
              {...getTagProps({ index })}
            />
          ))
        }
        renderInput={(params) => (
          <TextField
            {...params}
            variant="filled"
            label="freeSolo"
            placeholder="Favorites"
          />
        )}
      />
    </div>
  );
};