Reactjs 如何使Material UI自动完成组件看起来像Material UI网站上的组件

Material UI网站有许多关于如何配置

自动完成组件的示例，但奇怪的是，它没有给出最常见用例的示例。。。页面标题中的搜索输入

他们很清楚知道怎么做，因为Material UI网站上的内容正是我想要的。转到上的任何页面，页眉区域包含一个搜索框，其中包含搜索图标，页眉大小合理，在收到焦点时会展开，并且有白色文本（因为页眉有纯色）。不幸的是，检查元素并没有真正起到帮助作用

在玩了几个小时后，我的搜索框非常接近，但我的搜索框仍然太大，看起来没有Material UI网站上的搜索框好，并且顽固地拒绝显示除黑色文本以外的任何内容

这是我的密码

import React，{useState，useffect}来自“React”；
从“@material ui/core”导入{TextField，makeStyles}；
从“@material ui/lab/Autocomplete”导入自动完成；
从“@material ui/icons/Search”导入SearchIcon；
从“clsx”导入clsx；
const useStyles=makeStyles（（主题）=>({
根目录：{
显示：“flex”，
对齐项目：“居中”，
},
搜索图标：{
填充：主题。间距（0,2），
填充顶：主题。间距（2），
宽度：主题。间距（7），
pointerEvents:'无'，
显示：“内联块”，
},
输入文本：{
显示：“内联块”，
颜色：'白色'，
transition:theme.transitions.create（'width'），
[主题.breakpoints.up（'md'）]：{
边缘左侧：主题。间距（1），
宽度：“12ch”，
“&：焦点”：{
宽度：“20ch”，
},
},
},
}));
导出常量搜索框=（{className}）=>{
const classes=useStyles（）；
常量[searchResult，setSearchResult]=useState（[]）；
useffect（（）=>{
设置搜索结果([
{id:'01'，键入：'View'，匹配文本：'Hello world 1'}，
{id:'02'，键入：'Node'，匹配文本：'Hello world 2'}，
{id:'03'，键入：'View'，匹配文本：'Hello world 3'}，
{id:'04'，键入：'Node'，匹配文本：'Hello world 4'}，
]);
}, []);
返回(
option.type}
getOptionLabel={（option）=>option.matchingText}
renderInput={（参数）=>(
)}
/>
);
};
导出默认搜索框；
转到应用程序栏，他们正好有你想要的东西。你可以这样做一次（你必须通过css构建聚焦功能）我首先从应用程序栏搜索示例开始，但它没有使用自动完成组件。看起来我需要自定义
文本字段
组件，但它也没有自定义文本颜色的示例