@Material ui Autocomplete is it possible to show a custom label in getOptionLabel just like in renderOption?
there is the renderInput
property where you can customize the output of the component.
in it you can return a TextField
which has a label
property.
to customize the label you basicaly need to give it a className
. To do so assign to the TextField
a InputLabelProps
property that accepts object of the label props like that InputLabelProps={{ className: "autocompleteLabel" }}
example:
<Autocomplete
...
renderInput={(params) => {
return (
<TextField
{...params}
label={"choose " + resource}
InputLabelProps={{ className: "autocompleteLabel" }}
InputProps={{
...params.InputProps,
}}
/>
);
}}
/>
now if you inspect the autocomplete component you'll find the class assigned to the label
now that label is assigned with a class, you can do normal css