Стилизация GooglePlacesAutocomplete в React Функциональный компонент - PullRequest
Новая
       33

Стилизация GooglePlacesAutocomplete в React Функциональный компонент

0 голосов
/ 17 октября 2019

Я использую пакет реагировать-google-place-autocomplete для получения названий мест, но я не смог изменить стиль его ящика и предложения. Я знаю, что google уже упоминал имена классов в своих Документах , но в React functional components, похоже, это просто не сработало. Итак, что я пытаюсь сделать, это изменить стиль suggestion box, который имеет класс pac-container в соответствии с приведенным выше Google Doc

Вот что я получил до сих пор. 

import React, { useState } from 'react'
import styled from 'styled-components'
import GooglePlacesAutocomplete from 'react-google-places-autocomplete'

const AutoComplete = props => {
  const StyledDiv = styled.div`
    width: 300px;
  `

  const [address, setAddress] = useState('')
  const autocompletionRequest = {
    componentRestrictions: {
      country: 'US',
    },
    types: ['(regions)'],
  }
  const onSelect = ({ description }) => {
    setAddress(
      description
        .split(', ')
        .slice(0, -1)
        .join(', ')
    )
  }

  return (
    <StyledDiv>
      <GooglePlacesAutocomplete
        placeholder="Search City"
        initialValue={address}
        onSelect={onSelect}
        autocompletionRequest={autocompletionRequest}
        suggestionsStyles={{
          container: {
            color: 'red',
          },
          suggestion: {
            background: 'black',
          },
        }}
        renderSuggestions={(active, suggestions, onSelectSuggestion) => (
          <div className="suggestions-container">
            {suggestions.map(suggestion => (
              <div
                className="suggestion"
                key={suggestion.id}
                onClick={event => onSelectSuggestion(suggestion, event)}
              >
                {suggestion.description
                  .split(', ')
                  .slice(0, -1)
                  .join(', ')}
              </div>
            ))}
          </div>
        )}
      />
    </StyledDiv>
  )
}

export default AutoComplete
...