Troubleshooting Material-UI Autocomplete Component

Setting text color, outline, and padding on Material-ui Autocomplete component

When working with the Material-ui Autocomplete component, you may find the need to customize the text color, outline, and padding to match your design requirements. In this tutorial, we will explore different methods to achieve this customization.

Approach 1: Styling the Autocomplete InputProps

One approach you may have tried is applying custom styles directly to the InputProps of the Autocomplete component. While this works for styling the text color, it can cause the Autocomplete functionality to break, resulting in the component behaving like a normal TextField instead. Here is an example:

<FormControlLabel
  label="Please enter desired service:"
  labelPlacement="start"
  control={
    <Autocomplete
      id="services"
      options={props.serviceTypes}
      getOptionLabel={option => option.name}
      className={classes.inputRoot}
      InputProps={{
        className: classes.inputColor
      }}
      renderInput={params => (
        <TextField
          {...params}
          label=""
          className={classes.inputRoot}
          variant="outlined"
          fullWidth
        />
      )}
      onChange={setService}
    />
  }
/>

In the above code, the className inputColor is applied to the InputProps of the TextField within the Autocomplete component. However, as mentioned earlier, this approach can break the Autocomplete functionality.

Approach 2: Leveraging the inputRoot CSS class

To customize the text color, outline, and padding of the Autocomplete component without breaking its functionality, we can utilize the inputRoot CSS class provided by Material-ui. By applying custom styles to this class, we can achieve the desired customization. Here is an example:

import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles((theme) => ({
  inputRoot: {
    color: "purple",
    paddingLeft: 20,
    "& .MuiOutlinedInput-notchedOutline": {
      borderColor: "green"
    }
  }
}));

export default function MyAutocompleteComponent() {
  const classes = useStyles();

  return (
    <Autocomplete
      id="services"
      options={props.serviceTypes}
      getOptionLabel={option => option.name}
      className={classes.inputRoot}
      style={{ width: 400 }}
      renderInput={params => (
        <TextField
          {...params}
          label=""
          className={classes.inputRoot}
          variant="outlined"
          fullWidth
        />
      )}
      onChange={setService}
    />
  );
}

In the above example, we define a custom CSS class inputRoot using the makeStyles function from Material-ui. This class allows us to customize the text color, padding, and outline color. By applying this class to the Autocomplete component and the TextField within it, we can achieve the desired customization.

Conclusion

Customizing the text color, outline, and padding of the Material-ui Autocomplete component can be achieved by leveraging the inputRoot CSS class provided by Material-ui. This approach allows you to style the component while preserving its Autocomplete functionality.

By following the examples and approaches provided in this tutorial, you should now have the necessary knowledge to customize the text color, outline, and padding on the Material-ui Autocomplete component to suit your specific design needs.

reference : 

reactjs