google 的样式自动完成不起作用

Question

我正在研究 Angular 9 和 Ionic 5，我正在使用 google 位置自动完成地址输入。自动完成工作正常，感谢 this 我设法在浏览器上编辑样式。然后我转到我的样式表 (scss) 将这些样式放入它们各自的类（pac-container、pac-item、pac-icon 等）中，这些样式不会按照我在.scs 文件。如果我检查浏览器，我的 none 样式在 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);
    });
  } 
}

我什至尝试检查我 phone 上的 apk，因为我读到有些人无法在本地主机上运行它。但是，仍然没有用。关于如何解决这个问题的任何想法？提前致谢。

Answer 1

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

google 的样式自动完成不起作用

Styles for google places autocomplete not working

css

google-maps

google-places-api

ionic-framework

googleplacesautocomplete