How To customize MUI Autocomplete Modal with Own Style? 🚀✨

Customizing MUI Autocomplete Modal Styling in Simple Steps

If you’re using Material-UI (MUI) and want to give your Autocomplete component a personalized touch, you’re in the right place! Today, we’ll walk through a simple customization using your own styles.

Step 1: Set Up Your Styles

In your component file, start by creating your styles using MUI’s makeStyles hook. This is where the magic happens. Here’s a quick example:

const useStyles = makeStyles((theme) => ({
  customListbox: {
    '& .MuiAutocomplete-option': {
      padding: '6px !important',
      margin: '4px 0px !important',
      borderRadius: '8px !important',
      fontSize: '12px !important',
    },
  },
}));

In this example, we’re targeting the Autocomplete options and applying specific styles like padding, margin, border-radius, and font size.

Step 2: Apply Styles to Autocomplete

Next, let’s apply these styles to your Autocomplete component. Use the useStyles hook to access your custom styles and apply them to the Autocomplete component:

 

const YourComponent = () => {
  const classes = useStyles();

  return (
    <Autocomplete
      classes={{
        listbox: classes.customListbox,
      }}
      options={yourOptions}
      getOptionLabel={(option) => option.label}
      renderInput={(params) => <TextField {...params} label="Your Label" />}
    />
  );
};

 

Replace yourOptions with your actual array of options. Notice how we use them classes.customListbox to inject our styles into the Autocomplete component.

Step 3: Tweak and Experiment

Feel free to tweak the styles based on your preferences. You can adjust the padding, margins, and other properties to achieve the look you want.

And that’s it! With just a few lines of code, you’ve added your flair to the MUI Autocomplete component. Remember, customization is about making it uniquely yours, so don’t hesitate to experiment and find what suits your design best.

Happy coding! 🚀✨