使用 React 的 Material UI：如何設置樣式<autocomplete />帶圓角

Question

我一直是谷歌搜索欄的粉絲，它有漂亮的圓角和文本周圍充足的填充。

我正在嘗試使用 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 的新手，所以我仍然不太確定如何做這些 styles，但我認為問題是邊框是由一些內部元素繪制的，雖然我可以在組件本身上設置 borderRadius全球 CSS：

.MuiOutlinedInput-root {
  border-radius: 30px;
}

我似乎無法在任何地方設置填充或邊框。 我也嘗試過使用sx設置樣式，但它什么也沒做。

Answer 1

我試圖弄清楚如何排列邊緣（想通了，請參閱更新） ，但這是我能夠通過renderInput插入搜索圖標的方式，我在最后擺脫了展開和折疊箭頭通過設置freeSolo={true} （但這允許用戶輸入不綁定到提供的選項）。

import { Search } from '@mui/icons-material';
import { Autocomplete, AutocompleteRenderInputParams, InputAdornment } from '@mui/material';

...
<Autocomplete
            freeSolo={true}
            renderInput={(renderInputParams: AutocompleteRenderInputParams) => (
                <div ref={renderInputParams.InputProps.ref}
                    style={{
                        alignItems: 'center',
                        width: '100%',
                        display: 'flex',
                        flexDirection: 'row'
                    }}>
                    <TextField style={{ flex: 1 }} InputProps={{
                        ...renderInputParams.InputProps, startAdornment: (<InputAdornment position='start'> <Search /> </InputAdornment>),
                    }}
                        placeholder='Search'
                        inputProps={{
                            ...renderInputParams.inputProps
                        }}
                        InputLabelProps={{ style: { display: 'none' } }}
                    />
                </div >
            )}
            ...
/>

忽略 colors 和其他樣式，但這就是它的樣子：

更新

我能夠通過 css 控制border-radius並將左下角和右下角設置為 0，將頂部設置為 20px 來對齊邊緣。

這是一個演示：

這是我必須在 css 中進行的更改。我還保留了底部邊框，以便在搜索和結果之間進行划分，但您可以根據需要設置樣式。 （我也在使用 scss，所以我在頂部聲明了 colors 作為變量）。

div.MuiAutocomplete-root div.MuiOutlinedInput-root { /* Search bar when not in focus */
  border-radius: 40px;
  background-color: $dark-color;
}

div.MuiAutocomplete-root div.MuiOutlinedInput-root.Mui-focused { /* Search bar when focused */
  border-radius: 20px 20px 0px 0px !important;
}

div.MuiAutocomplete-root div.Mui-focused fieldset { /* fieldset element is what controls the border color. Leaving only the bottom border when dropdown is visible */
  border-width: 1px !important;
  border-color: transparent transparent $light-gray-color transparent !important;
}

.MuiAutocomplete-listbox { /* To control the background color of the listbox, which is the dropdown */
  background-color: $dark-color;
}

div.MuiAutocomplete-popper div { /* To get rid of the rounding applied by Mui-paper on the dropdown */
  border-top-right-radius: 0px;
  border-top-left-radius: 0px;
}

Answer 2

您必須查看自動完成 css類並在您的組件中覆蓋它們或在您的主題中使用它們（如果您使用它們）。

例如添加左側填充

          <TextField
            {...params}
            label="Search users..."
            sx={{
              "& .MuiAutocomplete-inputRoot": {
                paddingLeft: "20px !important"
              },
              "& .MuiInputLabel-outlined": {
                paddingLeft: "20px"
              },
              "& .MuiInputLabel-shrink": {
                paddingLeft: 0
              }
            }}
          />

Answer 3

您只需將邊框半徑添加到字段集：

<Autocomplete
  sx={{ '& fieldset': { borderRadius: 33 }}}
/>

代碼沙盒