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

Question

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

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

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

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

这是我当前的代码：

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" })),
];

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

Answer 1

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

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

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