How to change mui autocomplete border radius in react js?

Hi Friends 👋,

Welcome To aGuideHub!

To change mui autocomplete border radius in React js, you can use border-radius: 50px !important; in .MuiInputBase-root. It will change mui autocomplete border radius.

Today, I am going to show you, how to change mui autocomplete border radius in react js.

Installation

Install the following packages to use change mui autocomplete border radius in react js.

npm

npm install @mui/material @emotion/react @emotion/styled

yarn

yarn add @mui/material @emotion/react @emotion/styled

MUI material change mui autocomplete border radius example.

The below code is an example of a Material UI autocomplete border radius. You have to import @mui material autocomplete and use CSS class.MuiInputBase-root to set border-radius: 50px !important; then we have changed border-radius.

App.js

import * as React from 'react';
import TextField from '@mui/material/TextField';
import Autocomplete from '@mui/material/Autocomplete';
import "./App.css"

export default function ComboBox() {
  return (
      <Autocomplete
      options={['Option 1', 'Option 2', 'Option 3']}
      sx={{ width: 300 }}
      renderInput={(params) => (
      <TextField {...params} label="border radius" variant="outlined" />
      )}
    />
  );
}

App.css

.MuiInputBase-root{
  border-radius: 50px !important;
}

In the above code example, I have used the @mui/material component and change mui autocomplete border radius.

Check the output of the above code example.

MUI material change mui autocomplete border color example.

The below code is an example of change mui autocomplete border color. You have to import @mui material autocomplete and use inline CSS sx={{border:'1px solid red'}} to change the border color.

App.js

import * as React from 'react';
import TextField from '@mui/material/TextField';
import Autocomplete from '@mui/material/Autocomplete';

export default function ComboBox() {
  return (
      <Autocomplete
      options={['Option 1', 'Option 2', 'Option 3']}
      sx={{ width: 300 }}
      renderInput={(params) => (
      <TextField {...params} label="border color" sx={{border:'1px solid pink'}} variant="outlined" />
      )}
    />
  );
}

In the above code example, I have used the @mui/material component and change mui autocomplete border color.

Check the output of the above code example.

All the best 👍