javascript - 未使用的 div 出现在 React 谷歌地图上，我无法设置它的样式

Question

我正在使用 React Google map ，我正在尝试设置它的样式。我想将两个 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: ("API"),
})(GoogleMap)

ContactPage.js(这里我导入了google map ):

  <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;
}

当我从控制台向隐藏的 div 添加 50% 的宽度时， map 显示良好，但实际上我无法找到添加该 div 的内容以及如何从代码端设置样式。这个 DIV 不在代码中。

这里我展示了当我通过控制台向不可见的 div 添加 50% 时它起作用了:

我尝试在 <GoogleMap /> 周围添加 div在 ContactPage.js 中，我在 <Map> 附近尝试了同样的方法标记但没有任何帮助。

我真的很沮丧，现在几天都找不到解决这个问题的方法，所以任何帮助都意义重大!

这是在线网站，您可以自行测试: https://trustmypetsitter.herokuapp.com/contactpage

Answer 1

我会继续警告您，这绝对是一种 hacky 方式。但它将适用于当前结构。

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

What does it do?

它将特定父级(在本例中为 CSS 内容包装器)中的第一个 div 设置为具有 50% 的宽度。