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

Posted 2023-02-22

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

【英文标题】：changing placeholder font, moving chips/tags below search bar

【发布时间】：2020-10-20 03:33:01

【问题描述】：

我在使用 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" )),
];

【参考方案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;