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

Posted 2023-03-27

【中文标题】未使用的 div 出现在反应谷歌地图上，我无法设置它的样式

【英文标题】：Unused div is appearing on react google maps and I can't style it

【发布时间】：2019-11-19 06:18:48

【问题描述】：

我正在使用 React Google Maps，我正在尝试对其进行样式设置。我想在一个 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（这里我导入谷歌地图）：

  <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。

这里我展示了当我通过控制台将 50% 添加到不可见的 div 时它可以工作：

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

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

这是一个现场直播的网站，您可以自行测试： https://trustmypetsitter.herokuapp.com/contactpage

【问题讨论】：

最好不要公开你的 api 密钥

【参考方案1】：

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

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

它有什么作用？

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