谷歌地方自动完成的样式不起作用答案

【问题标题】：Styles for google places autocomplete not working谷歌地方自动完成的样式不起作用
【发布时间】：2020-09-16 08:48:07
【问题描述】：

我正在开发 Angular 9 和 Ionic 5，并且我正在使用 google places 自动完成来输入地址。自动完成工作正常，感谢this，我设法在浏览器上编辑了样式。然后我转到我的样式表 (scss) 将这些样式放入它们各自的类中（pac-container、pac-item、pac-icon 等），并且样式不会像我在 scss 文件中指定的那样显示。如果我检查浏览器，我的样式都不在 pac 类中。我的代码如下：

profile.page.html

<ion-item class="br-5 mt">
   <ion-icon name="home" slot="start" class="ion-align-self-center" color="primary"></ion-icon>
   <ion-input id="googlePlaces" placeholder="Dirección" formControlName="address" required type="text"></ion-input>
</ion-item>

profile.page.scss

.pac-container{
    font-family: 'Open Sans';
}

.pac-item{
    margin-left:10px;
}

.pac-icon{
    display:none;
}

profile.page.ts

declare var google: any;
export class ProfilePage implements OnInit {
constructor(){}
ionViewDidEnter() {
    this.activeGooglePlace();
  }
activeGooglePlace() {

    let input = document.getElementById('googlePlaces').getElementsByTagName('input')[0];
    let autocomplete = new google.maps.places.Autocomplete(input, { types: ['geocode'] });
    autocomplete.setComponentRestrictions({ 'country': ['cl'] });
    google.maps.event.addListener(autocomplete, 'place_changed', () => {
      let place = autocomplete.getPlace();
      this.profileForm.controls.latitude.setValue(place.geometry.location.lat());
      this.profileForm.controls.longitude.setValue(place.geometry.location.lng());
      this.profileForm.controls.address.setValue(place.formatted_address);
    });
  } 
}

我什至尝试检查手机上的 apk，因为我读到有些人无法使其在 localhost 上运行。但是，仍然没有工作。关于如何解决这个问题的任何想法？提前致谢。

【问题讨论】：

标签： css google-maps ionic-framework google-places-api googleplacesautocomplete

【解决方案1】：

我可以通过在我的主题 variables.scss 中添加所有这些类来更改它。真的很惭愧，我一开始没能检查出那个。

【讨论】：