Upon taking over a project, I found myself working with material ui for the first time. Here is an excerpt from my code:
<FormControl fullWidth>
<InputLabel
className={className}
htmlFor={id}
error={error}
>
{label}
</InputLabel>
<Input
className={className}
id={id}
value={value}
onChange={(e) => {
onChange(e.target.value)
}}
/>
</FormControl>
This setup works well everywhere, with the label shrinking and styles being applied correctly. However, when inspecting the code, I noticed that the underline is styled using :before and :after pseudo classes.
Now, I need to apply similar styling to an Autocomplete component which uses Google Places to autocomplete locations. Specifically, I am working with the react-google-autocomplete library for this purpose.
I have attempted several methods, including:
const {ref} = usePlacesWidget({
apiKey: process.env.REACT_APP_API_KEY,
onPlaceSelected: (place) => {
console.log(place);
},
});
return (
<FormControl fullWidth>
<InputLabel
className={className}
htmlFor={id}
error={error}
>
{label}
</InputLabel>
<Autocomplete
ref={ref}
id={id}
className={className}
placeholder=""
renderInput={(params) => (
<Input
{...params}
InputProps={{
...params.InputProps,
className: {className}
}}
/>
)}
/>
</FormControl>
);
Despite the attempts, the label does not shrink as expected. I even tried adding:
InputLabelProps={{
shrink: true,
...props.InputLabelProps,
}}
without success.
The text field displays the correct size and font style but lacks any pseudo-class styling, featuring the default outline style instead.
I aim to replicate the appearance of the other text fields in the initial code snippet by applying the passed className. Any guidance would be greatly appreciated.
On a related note, when attempting the following:
const {ref} = usePlacesWidget({
apiKey: process.env.REACT_APP_API_KEY,
onPlaceSelected: (place) => {
console.log(place);
},
});
return (
<FormControl fullWidth>
<InputLabel
className={className}
htmlFor={id}
error={error}
>
{label}
</InputLabel>
<Input
ref={ref}
id={id}
className={className}
/>
</FormControl>
);
The component receives styling, although the search functionality fails to work. This outcome was somewhat anticipated, but it would be beneficial to find a resolution for this issue as well.