Material UI with React: How to style <Autocomplete/> with rounded corners

Question

I've always been a fan of Google's search bar, with nice rounded corners and ample padding around the text.

I'm trying to replicate this style using Material UI's <Autocomplete/> component, but I can't seem to do it. I'm using Next.js. What I have so far is:

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;

The above code should run as-is – there's an axios call in there to populate the autocomplete results too.

I've tried various way to get the <SearchIcon /> icon prefix inside the input with no success, but really I'd just be happy if I could figure out how to pad it. You can see in the google screenshot how the autocomplete lines up really well with the box, but in my version, the border-radius just rounds the element, and so it no longer lines up with the dropdown.

I'm new to Material UI, so I'm still not quite sure how to do these styles, but I think the issue is that the border is being drawn by some internal element, and although I can set the borderRadius on the component itself global CSS:

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

I can't seem to set the padding or borders anywhere. I've also tried setting style with sx but it does nothing.

Answer 1

You simply add border radius to fieldset:

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

Codesandbox

Answer 2

You have to look at the autocomplete css classes and override them in your component or use them in your theme, if you use one.

<Autocomplete
    componentsProps={{
      paper: {
        sx: {
          width: 350,
          margin: "auto"
        }
      }
    }}
    id="Hello"
    notched
    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..."
        sx={{
          "& .MuiOutlinedInput-root": {
            borderRadius: "50px",

            legend: {
              marginLeft: "30px"
            }
          },
          "& .MuiAutocomplete-inputRoot": {
            paddingLeft: "20px !important",
            borderRadius: "50px"
          },
          "& .MuiInputLabel-outlined": {
            paddingLeft: "20px"
          },
          "& .MuiInputLabel-shrink": {
            marginLeft: "20px",
            paddingLeft: "10px",
            paddingRight: 0,
            background: "white"
          }
        }}
      />
    )}
  />

Sandbox: https://codesandbox.io/s/infallible-field-qsstrs?file=/src/Search.js