自定義/更改下拉菜單文本？

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. 自動完成 CSS API 。
2. 如何用 styles object 覆蓋 styles 。
3. 如何使用全局 class 名稱覆蓋 styles 。
4. 如何用簡單的 css 覆蓋 styles 。
5. 您還可以閱讀有關允許您重寫Option視圖的renderOption道具。 你可以在這里找到信息。

如果這對您來說還不夠，您可以通過示例檢查我的沙箱。