未使用的 div 出现在 react google 地图上，我无法设置样式

Question

我正在使用 React Google 地图，我正在尝试设置它的样式。我想在 100% 宽度的容器中放置两个 div。它们都需要有 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地图）：

  <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% 的宽度时，地图显示良好，但我实际上找不到添加 div 的内容，我该如何做从代码端设置样式。这 DIV 不在代码中。

这里我通过console显示给看不到的div加50%有效：

我尝试在 ContactPage.js 中的 <GoogleMap /> 周围添加 div，我尝试在 <Map> 标签周围添加 div，但没有任何帮助。

我真的很沮丧，现在几天都找不到解决办法，所以任何帮助都意义重大！

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

Answer 1

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

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

What does it do?

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

未使用的 div 出现在 react google 地图上，我无法设置样式

Unused div is appearing on react google maps and I can't style it

javascript

css

reactjs

google-maps

react-google-maps