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

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

我的目标是让数组的“标题”部分以黑色文本显示在下拉菜单的左侧，数组的“类型”部分以灰色文本显示在右侧

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

以下是我努力实现的目标：

这是我目前的代码：

从“React”导入React；
从“@material ui/core/TextField”导入TextField；
从“@material ui/lab/Autocomplete”导入自动完成；
进口{
制作风格，
用方式,，
提供者，
创造博物馆，
}来自“@material ui/core/styles”；
从“@material ui/core”导入{Chip}”；
从“@material ui/core/styles/colorManipulator”导入{emphasis}”；
从“@material ui/core/colors/lime”导入石灰；
从“@material ui/core/colors/orange”导入橙色；
const useStyles=makeStyles({
文本字段：{
“&input:：占位符”：{
颜色：“a2a1a1”，
字体：“斜体”，
},
},
});
const theme=createMuiTheme({
调色板：{
第三：石灰，
第四纪：橙色，
},
});
//这是材质UI为标准调色板颜色自动执行的步骤。
theme.palete.treative=theme.palete.augmentColor（theme.palete.treative）；
theme.palete.quartional=theme.palete.augmentColor（theme.palete.quartional）；
常量getCustomChip=（颜色）=>
使用样式（（主题）=>({
初级颜色：{
backgroundColor:theme.palette[color].main，
颜色：主题。调色板[颜色]。对比文本，
},
deletableColorPrimary：{
“&：焦点”：{
背景色：强调（theme.palete[color].main，0.2），
},
},
}))（芯片）；
常量类型芯片={
歌曲：奇普，
艺术家：getCustomChip（“二级”），
电影：getCustomChip（“第三方”），
显示：getCustomChip（“四元”），
};
导出默认函数标记（）{
const[selectedOptions，setSelectedOptions]=React.useState（[]）；
const classes=useStyles（）；
返回(
{
设置所选选项（新值）；
}}
getOptionSelected={（o，v）=>o.title==v.title&&o.type==v.type}
getOptionLabel={（o）=>o.title+“”+o.type}
renderTags={（值，getTagProps）=>[]}
renderInput={（参数）=>(
)}
/>
{selectedOptions.map（（选项，索引）=>{
const ChipForType=typeToChip[option.type]；
返回(
设置选定选项([
…选择选项。切片（0，索引），
…选择选项。切片（索引+1），
])
}
/>
);
})}
);
}
康斯特10大歌曲=[
{标题：“歌曲A”，键入：“歌曲”}，
{标题：“歌曲B”，键入：“歌曲”}，
{标题：“歌曲C”，键入：“歌曲”}，
{标题：“歌曲D”，键入：“歌曲”}，
{标题：“歌曲E”，键入：“歌曲”}，
{标题：“歌曲F”，键入：“歌曲”}，
{标题：“Song G”，键入：“Song”}，
{标题：“Song H”，键入：“Song”}，
{标题：“歌曲I”，键入：“歌曲”}，
{标题：“Song J”，键入：“Song”}，
];
常数top10Artists=[
{标题：“艺术家A”，类型：“艺术家”}，
{标题：“艺术家B”，类型：“艺术家”}，
{标题：“艺术家C”，类型：“艺术家”}，
{标题：“艺术家D”，类型：“艺术家”}，
{标题：“艺术家E”，类型：“艺术家”}，
{标题：“艺术家F”，类型：“艺术家”}，
{标题：“艺术家G”，类型：“艺术家”}，
{标题：“艺术家H”，类型：“艺术家”}，
{标题：“艺术家I”，类型：“艺术家”}，
{标题：“艺术家J”，类型：“艺术家”}，
];
常数top10Shows=[
{标题：“显示A”，键入：“显示”}，
{标题：“Show B”，键入：“Show”}，
{标题：“Show C”，键入：“Show”}，
{标题：“Show D”，键入：“Show”}，
{标题：“Show E”，键入：“Show”}，
{标题：“Show F”，键入：“Show”}，
{标题：“Show G”，键入：“Show”}，
{标题：“Show H”，键入：“Show”}，
{标题：“Show I”，键入：“Show”}，
{标题：“Show J”，键入：“Show”}，
];
常数top10Films=[
{标题：“电影A”，类型：“电影”}，
{标题：“电影B”，类型：“电影”}，
{标题：“电影C”，类型：“电影”}，
{标题：“电影D”，类型：“电影”}，
{标题：“电影E”，类型：“电影”}，
{标题：“电影F”，类型：“电影”}，
{标题：“电影G”，类型：“电影”}，
{标题：“胶片H”，类型：“胶片”}，
{标题：“电影I”，类型：“电影”}，
{标题：“电影J”，类型：“电影”}，
];
最终常数=[
…top10Songs.map（（条目）=>（{…条目，键入：“song”}）），
…top10Artists.map（（条目）=>（{…条目，键入：“艺术家”}）），
…top10Films.map（（条目）=>（{…条目，键入：“film”}）），
…top10Shows.map（（条目）=>（{…条目，键入：“show”}）），
];

您可以通过MUI CSS自定义点自定义MUI

自动完成

。请查看以下链接：

您还可以阅读有关

渲染

道具的信息，该道具允许您重写

选项

视图。你可以找到这些信息

---

如果还不够，您可以查看my。

您可以通过MUI CSS自定义点自定义MUI

自动完成。请查看以下链接：





您还可以阅读有关
渲染
道具的信息，该道具允许您重写
选项
视图。你可以找到这些信息
如果这对你来说还不够，你可以查我的