Неиспользованный div появляется на Google Maps реагирования, и я не могу его стилизовать - PullRequest
Новая
       36

Неиспользованный div появляется на Google Maps реагирования, и я не могу его стилизовать

0 голосов
/ 09 июля 2019

Я использую React Google Maps и пытаюсь стилизовать его.Я хочу поместить два элемента div в контейнер шириной 100%.У них обоих должна быть ширина 50%, но React Google Maps добавляет div, который я не могу стилизовать.

GoogleMap.js: 

import React, { Component } from 'react';
import { Map, InfoWindow, Marker, GoogleApiWrapper } from 'google-maps-react';
import css from './GoogleMap.css';

export class GoogleMap extends Component {
  render() {
    return (
      <Map className={css.googleMap} google={this.props.google} zoom={14}>

        <Marker onClick={this.onMarkerClick}
                name={'Current location'} />

        <InfoWindow onClose={this.onInfoWindowClose}>
        </InfoWindow>
      </Map>
    );
  }
}

export default GoogleApiWrapper({
  apiKey: ("AIzaSyAkdK499qBRQ4Jmm1Knu9JNh4UeUH7xjGc"),
})(GoogleMap)

ContactPage.js (здесь я импортирую карту Google): 

  <LayoutWrapperMain className={css.staticPageWrapper}>
   <h1 className={css.pageTitle}>Need help? Ask our experts for any help you need.</h1>

  <div className={css.contentWrapper}>

   <ContactForm />

     <GoogleMap />

  </div>

  </LayoutWrapperMain>

GoogleMap.css: 

.googleMap {
    height: 100% !important;
    width: 100% !important;
    position: relative !important;
}

И карта показывает себя хорошо, когда я добавляю 50% ширины к скрытому элементу div из консоли, но я не могу найти чтодобавляет этот div и как я могу стилизовать его со стороны кода.ЭТОГО DIV НЕ В КОДЕ.

Здесь я показываю, что это работает, когда я добавляю 50% к невидимому div через консоль:

enter image description here

Я пытался добавить div около <GoogleMap /> в ContactPage.js , я пытался сделать то же самое с тегом <Map>, но ничего не помогло.

Я действительно разочаровани не могу найти решение этой проблемы в течение нескольких дней, поэтому любая помощь будет много значить!

Это веб-сайт в режиме реального времени, поэтому вы можете проверить его самостоятельно: https://trustmypetsitter.herokuapp.com/contactpage

1 Ответ

0 голосов
/ 09 июля 2019

Я пойду вперед и предупреждаю вас, что это определенно хакерский способ сделать это. Но это будет работать с текущей структурой. 

.ContactPage_contentWrapper__2aOFH > div:first-of-type {
    width: 50%;
}

Что это делает?

Это стиль первого div в конкретном родительском элементе (в данном случае, CSS Content Wrapper), чтобы иметь ширину 50%.

...