更改占位符字体，在搜索栏下方移动芯片/标签

Question

我在使用 material-ui 搞清楚一些事情时遇到了一些麻烦。

首先，有没有办法让标签/芯片出现在搜索栏下方，而不是在搜索栏顶部？

我也一直在尝试将自动完成占位符的字体颜色设置为斜体并更改，但没有成功。

如果有人能帮助我，我将不胜感激！

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

export default function Tags() {
  return (
    <div style={{ width: 500 }}>
      <Autocomplete
        disableClearable="true"
        filterSelectedOptions="true"
        multiple
        id="tags-standard"
        options={final}
        //getOptionSelected
        getOptionLabel={(o) => o.title + " " + o.year}
        renderTags={(value, getTagProps) =>
          value.map((option, index) => (
            <Chip
              color={option.type === "film" ? "primary" : "red"}
              //variant="filled"
              label={`${option.title} ${option.year}`}
              {...getTagProps({ index })}
            />
          ))
        }
        renderInput={(params) => (
          <TextField
            {...params}
            variant="standard"
            placeholder="Favorites"
            margin="normal"
            color="blue"
            fullWidth
          />
        )}
      />
    </div>
  );
}

const top100Shows = [
  { title: "Once ", year: 19 },
  { title: "Ameri", year: 1998 },
  { title: "ar", year: 2014 },
  { title: "Cas", year: 1942 },
  { title: "C", year: 1931 },
  { title: "P", year: 1960 },
  { title: "Thee", year: 1999 },
  { title: "The", year: 2011 },
  { title: "Mod", year: 1936 },
  { title: "Rai", year: 1981 },
  { title: "Rea", year: 1954 },
  { title: "The", year: 2002 },
  { title: "Tee", year: 2006 },
  { title: "Ci", year: 1988 },
  { title: "Tr", year: 2006 },
  { title: "Gra", year: 1988 },
];

// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
const top100Films = [
  { title: "Once Upon a Time in the West", year: 1968 },
  { title: "American History X", year: 1998 },
  { title: "Interstellar", year: 2014 },
  { title: "Casablanca", year: 1942 },
  { title: "City Lights", year: 1931 },
  { title: "Psycho", year: 1960 },
  { title: "The Green Mile", year: 1999 },
  { title: "The Intouchables", year: 2011 },
  { title: "Modern Times", year: 1936 },
  { title: "Raiders of the Lost Ark", year: 1981 },
  { title: "Rear Window", year: 1954 },
  { title: "The Pianist", year: 2002 },
  { title: "The Departed", year: 2006 },
  { title: "Cinema Paradiso", year: 1988 },
  { title: "The Lives of Others", year: 2006 },
  { title: "Grave of the Fireflies", year: 1988 },
];

const final = [
  ...top100Films.map((f) => Object.assign({}, f, { type: "film" })),
  ...top100Shows.map((s) => Object.assign({}, s, { type: "show" })),
];

Answer 1

我想使所选芯片出现在输入字段下方的最合适的方法是自己控制Autocomplete 组件，即将其状态提升到您的Tags 组件，这样您就可以访问所选选项并可以在其中渲染它们Autocomplete 组件下方的另一个元素：

[...]

const [selectedOptions, setSelectedOptions] = React.useState([]);

return (
    <div style={{ width: 500 }}>
        <Autocomplete
            value={selectedOptions}
            onChange={(event, newValue) => {
                setSelectedOptions(newValue);
            }}
    
            [...]
        />

        <div>{
            selectedOptions.map((option, index) => (
                <Chip
                  key={index}
                  color={option.type === "film" ? "primary" : "red"}
                  label={`${option.title} ${option.year}`}
                  onDelete={() => setSelectedOptions([
                      ...selectedOptions.slice(0, index),
                      ...selectedOptions.slice(index + 1)
                  ])}
                />
            ))
        }</div>
    </div>
);

AutoComplete 的输入组件是一个TextField，它设置其输入组件的占位符属性。要通过 CSS 选择此占位符，请使用 ::placeholder 伪元素：

.MuiTextField-root input::placeholder {
    color: red;
}