我一直是谷歌搜索栏的粉丝，它有漂亮的圆角和足够的文本填充。
我尝试使用Material UI的<Autocomplete/>组件复制这种风格，但似乎做不到。我使用的是Next.js。到目前为止，我所拥有的是：
import React, { useState, useEffect } from 'react';
import TextField from '@mui/material/TextField';
import Stack from '@mui/material/Stack';
import Autocomplete from '@mui/material/Autocomplete';
import { borderRadius, Box } from '@mui/system';
import SearchIcon from '@material-ui/icons/Search';
const LiveSearch = (props) => {
const [jsonResults, setJsonResults] = useState([]);
useEffect(() => {
fetch(`https://jsonplaceholder.typicode.com/users`)
.then(res => res.json())
.then(json => setJsonResults(json));
}, []);
return (
<Stack sx={{ width: 400, margin: "auto"}}>
<Autocomplete
id="Hello"
getOptionLabel={(jsonResults) => jsonResults.name}
options={jsonResults}
noOptionsText="No results"
isOptionEqualToValue={(option, value) => {
option.name === value.name
}}
renderOption={(props, jsonResults) => (
<Box component="li" {...props} key={jsonResults.id}>
{jsonResults.name} - Ahhh
</Box>
)}
renderInput={(params) => <TextField {...params} label="Search users..." />}
/>
</Stack>
)
}
export default LiveSearch;上面的代码应该按原样运行--其中还有一个axios调用，用于填充自动完成结果。
我尝试过各种方法来获得<SearchIcon />图标前缀，但都没有成功，但如果我能找到填充它的方法，我真的会很高兴。你可以在谷歌截图中看到自动完成功能是如何与框对齐的，但在我的版本中，border-radius只是将元素舍入，因此它不再与下拉列表对齐。
我是Material UI的新手，所以我仍然不太清楚如何使用这些样式，但我认为问题是边框是由一些内部元素绘制的，尽管我可以在组件本身的全局CSS上设置borderRadius：
.MuiOutlinedInput-root {
border-radius: 30px;
}我似乎不能设置填充或边框的任何地方。我也尝试设置风格与sx，但它没有任何作用。
2条答案
按热度按时间g6ll5ycj1#
你必须查看自动完成的css类，并在你的组件中覆盖它们，或者在你的主题中使用它们，如果你使用的话。
沙盒：https://codesandbox.io/s/infallible-field-qsstrs?file=/src/Search.js
uubf1zoe2#
我试图弄清楚如何排列边缘 （弄清楚了，见更新），但这是我如何能够插入搜索图标，通过
renderInput，我摆脱了展开和折叠箭头在年底的酒吧设置freeSolo={true}（但这允许用户输入不绑定到提供的选项）。忽略颜色和其他样式，但它看起来是这样的：
更新
我能够通过CSS控制
border-radius并将左下角和右下角设置为0，顶部设置为20px来排列边缘。下面是一个演示：
以下是我在css中所做的修改。我还保留了底部边框，这样在搜索和结果之间就有了一个分界线，但是如果你喜欢的话，你可以随意设置样式。（另外，我正在使用scss，所以我在顶部将颜色声明为变量）。