自定义/更改下拉菜单文本？

Posted 2023-02-22

【中文标题】自定义/更改下拉菜单文本？

【英文标题】：customizing/changing the drop-down menu text?

【发布时间】：2020-10-21 00:00:45

【问题描述】：

我不确定这是否可行，但我想调整下拉菜单文本的位置和字体颜色。

我的目标是让数组的“标题”部分为黑色文本并位于下拉菜单的左侧，而数组的“类型”部分位于右侧并成为灰色文本。

现在我所有的文字都是黑色的，在左边。

下面是我想要达到的目标的图片：

这是我当前的代码：

import React from "react";
import TextField from "@material-ui/core/TextField";
import Autocomplete from "@material-ui/lab/Autocomplete";
import 
  makeStyles,
  withStyles,
  ThemeProvider,
  createMuiTheme,
 from "@material-ui/core/styles";
import  Chip  from "@material-ui/core";
import  emphasize  from "@material-ui/core/styles/colorManipulator";
import lime from "@material-ui/core/colors/lime";
import orange from "@material-ui/core/colors/orange";

const useStyles = makeStyles(
  textField: 
    "& input::placeholder": 
      color: "#a2a1a1",
      fontStyle: "italic",
    ,
  ,
);

const theme = createMuiTheme(
  palette: 
    tertiary: lime,
    quaternary: orange,
  ,
);
// This is a step that Material-UI automatically does for the standard palette colors.
theme.palette.tertiary = theme.palette.augmentColor(theme.palette.tertiary);
theme.palette.quaternary = theme.palette.augmentColor(theme.palette.quaternary);

const getCustomChip = (color) =>
  withStyles((theme) => (
    colorPrimary: 
      backgroundColor: theme.palette[color].main,
      color: theme.palette[color].contrastText,
    ,
    deletableColorPrimary: 
      "&:focus": 
        backgroundColor: emphasize(theme.palette[color].main, 0.2),
      ,
    ,
  ))(Chip);

const typeToChip = 
  song: Chip,
  artist: getCustomChip("secondary"),
  film: getCustomChip("tertiary"),
  show: getCustomChip("quaternary"),
;

export default function Tags() 
  const [selectedOptions, setSelectedOptions] = React.useState([]);

  const classes = useStyles();

  return (
    <ThemeProvider theme=theme>
      <div style= width: 500 >
        <Autocomplete
          disableClearable="true"
          filterSelectedOptions="true"
          multiple
          id="tags-standard"
          options=final
          value=selectedOptions
          onChange=(event, newValue) => 
            setSelectedOptions(newValue);
          
          getOptionSelected=(o, v) => o.title === v.title && o.type === v.type
          getOptionLabel=(o) => o.title + " " + o.type
          renderTags=(value, getTagProps) => []
          renderInput=(params) => (
            <TextField
              ...params
              className=classes.textField
              variant="standard"
              placeholder="Favorites"
              margin="normal"
              //color="blue"
              fullWidth
            />
          )
        />

        <div>
          selectedOptions.map((option, index) => 
            const ChipForType = typeToChip[option.type];
            return (
              <ChipForType
                key=index
                color="primary"
                label=`$option.title`
                onDelete=() =>
                  setSelectedOptions([
                    ...selectedOptions.slice(0, index),
                    ...selectedOptions.slice(index + 1),
                  ])
                
              />
            );
          )
        </div>
      </div>
    </ThemeProvider>
  );


const top10Songs = [
   title: "Song A", type: "Song" ,
   title: "Song B", type: "Song" ,
   title: "Song C", type: "Song" ,
   title: "Song D", type: "Song" ,
   title: "Song E", type: "Song" ,
   title: "Song F", type: "Song" ,
   title: "Song G", type: "Song" ,
   title: "Song H", type: "Song" ,
   title: "Song I", type: "Song" ,
   title: "Song J", type: "Song" ,
];

const top10Artists = [
   title: "Artist A", type: "Artist" ,
   title: "Artist B", type: "Artist" ,
   title: "Artist C", type: "Artist" ,
   title: "Artist D", type: "Artist" ,
   title: "Artist E", type: "Artist" ,
   title: "Artist F", type: "Artist" ,
   title: "Artist G", type: "Artist" ,
   title: "Artist H", type: "Artist" ,
   title: "Artist I", type: "Artist" ,
   title: "Artist J", type: "Artist" ,
];

const top10Shows = [
   title: "Show A", type: "Show" ,
   title: "Show B", type: "Show" ,
   title: "Show C", type: "Show" ,
   title: "Show D", type: "Show" ,
   title: "Show E", type: "Show" ,
   title: "Show F", type: "Show" ,
   title: "Show G", type: "Show" ,
   title: "Show H", type: "Show" ,
   title: "Show I", type: "Show" ,
   title: "Show J", type: "Show" ,
];

const top10Films = [
   title: "Film A", type: "Film" ,
   title: "Film B", type: "Film" ,
   title: "Film C", type: "Film" ,
   title: "Film D", type: "Film" ,
   title: "Film E", type: "Film" ,
   title: "Film F", type: "Film" ,
   title: "Film G", type: "Film" ,
   title: "Film H", type: "Film" ,
   title: "Film I", type: "Film" ,
   title: "Film J", type: "Film" ,
];

const final = [
  ...top10Songs.map((entry) => ( ...entry, type: "song" )),
  ...top10Artists.map((entry) => ( ...entry, type: "artist" )),
  ...top10Films.map((entry) => ( ...entry, type: "film" )),
  ...top10Shows.map((entry) => ( ...entry, type: "show" )),
];

我从回答我之前问题的每个人那里学到了很多东西，所以如果您能提供帮助，请提前感谢您！

【参考方案1】：

您可以通过 MUI CSS 自定义点自定义 MUI Autocomplete。请查看以下链接：

Autocomplete CSS API。 How to override styles with styles object。 How to override styles with global class names。 How to override styles with simple css。 您还可以阅读有关 renderOption 属性的信息，该属性允许您重写 Option 视图。您可以找到信息here。

如果还不够，可以查看我的sandbox with an example。