ErrorPro / react-google-autocomplete

React components for google places API.
MIT License
462 stars 114 forks source link

How to style the Dropdown with google suggestions? #227

Open Razifmalik opened 8 months ago

Razifmalik commented 8 months ago

How can we style the actual dropdown with the google suggestions? I cannot find any props to do that. Ideally I would like to use tailwind to make it responsive for different screen sizes. Here is my current code as I do not know on how to style the dropdown. I cannot find anything in the documentation either -

`

  <Autocomplete
    //className=" flex-1 w-full appearance-none outline-none text-gray-700"
    style={{ width: "1250px", backgroundColor: "lightblue" }}
    ref={inputRef}
    apiKey={"API-Key"}
    onPlaceSelected={(selected, a, c) => {
      console.log(selected);
    }}
    options={{
      types: ["geocode", "establishment"],
      componentRestrictions: { country },
      offset: 2,
    }}
    defaultValue="Moscow"
  />
</div>

` Screenshot 2023-11-17 at 12 37 31

nstanard commented 1 week ago

If you want custom styling you need to implement your own input/dropdown using the hooks provided.

https://www.npmjs.com/package/react-google-autocomplete#useplacesautocompleteservice