My Google Maps is not taking my footer CSS - reactjs

Question

I am trying to make sure that any CSS I put within my Footer is not affected by adding my Google Maps API. You can see from the example that I am not able to keep the back ground black.
Footer
import React, {Component} from 'react';
import { Map, Marker, GoogleApiWrapper } from 'google-maps-react';
import './App.css';
class Footer extends Component {
render(){
const style = {
width: '300px',
height: '300px',
backgroundColor: 'black'
}
return (
<div className="site-footer">
<footer>
<p>My Footer</p>
<Map
google={this.props.google}
zoom={10}
initialCenter={{
lat: 35.5496939,
lng: -120.7060049
}}
style={style}
/>
</footer>
</div>
)
}
}
export default GoogleApiWrapper({
apiKey: ('YOUR_API_KEY')
})(Footer);
Footer CSS
.site-footer {
left: 0;
bottom: 0;
width: 100%;
margin-top: 20px;
color: white;
text-align: center;
flex-shrink: 0;
background: black;
}
Footer Example

Answer 1

It seems that there are different divs that contains the map when using the google-maps-react library. Per the package's documentation there's a style - which you configure to set the map dimension and there's a containerStyle - which is a div that contains the map.
So to set the map background to black, you need to use the containerStyle.
class Footer extends Component {
render(){
const style = {
width: '300px',
height: '300px'
}
const containerStyle = {
position: 'absolute',
width: '100%',
height: '100%',
backgroundColor: 'black'
}
return (
<div className="site-footer">
<footer>
<p>My Footer</p>
<Map
google={this.props.google}
zoom={10}
initialCenter={{
lat: 35.5496939,
lng: -120.7060049
}}
style={style}
containerStyle={containerStyle}
/>
</footer>
</div>
)
}
}
export default GoogleApiWrapper({
apiKey: "YOUR_API_KEY"
})(Footer);
You would also need to define the width and height of your site-footer class to fill in the white spaces. I used 800px here so that it will really fully contain my map and its container.
.site-footer {
left: 0;
bottom: 0;
width: 800px;
height: 800px;
margin-top: 20px;
color: white;
text-align: center;
flex-shrink: 0;
background-color: black;
}
Please see sample code.
Please use your API key in the sample code for it to work.