反应google-maps-react，从Google Maps api更改隐藏div的属性

Question

So I am rendering some maps using the google-maps-react library. However, I am having an issue with the most outter div which the google maps component produces. I don't want the div to be larger than its parent div, but its by default set to 100% width+height as well as position absolute(so oveflow:hidden does not work). It also does not have a id or class name therefor I cannot grab the div directly.

Below is the code to how I have my Map in a return statement for one of my react methods. The style change takes affect for the div BELOW the most outer div, not the one I need to change.

  <Map google={this.props.google} zoom={14} style={{width:'200px', 
     height:'200px', position:'relative'}}>
              <Marker onClick={this.onMarkerClick}
                    name={'Current location'} />
              <InfoWindow onClose={this.onInfoWindowClose}>
                <div>
                   "test"
                </div>
          </InfoWindow>
   </Map>

Below is a snippet of the two most outer divs produced by the google maps react component. The most outer div is basically invisible and I can't change its style properties

If someone can help me out on how to change that style property to 'position:relative' that would be great!

Answer 1

you can access inner first div using this css code

.classname div:first-child{
 position: relative !important;
}

In your case use like this

<div id="mapBox">
  <Map google={this.props.google} zoom={14} style={{width:'200px', 
     height:'200px', position:'relative'}}>
              <Marker onClick={this.onMarkerClick}
                    name={'Current location'} />
              <InfoWindow onClose={this.onInfoWindowClose}>
                <div>
                   "test"
                </div>
          </InfoWindow>
   </Map> 
</div>

//// css code

#mapBox div:first-child {
    position: relative !important;
    height: 500px !important;
}