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。请查看以下链接：

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。

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

1 个答案: