I am currently developing a map that includes an image overlay with adjustable opacity. Below is the code for this component:
import React from 'react'
import PropTypes from 'prop-types'
import { MapWithGroundOverlay } from './MapWithGroundOverlay'
import { withStyles } from '@material-ui/core/styles'
import Box from '@material-ui/core/Box'
import FormLabel from '@material-ui/core/FormLabel'
import Slider from '@material-ui/lab/Slider'
import Grid from '@material-ui/core/Grid'
import Paper from '@material-ui/core/Paper'
const styles = theme => ({
root: {
flexGrow: 1,
},
paper: {
padding: theme.spacing(2),
textAlign: 'center',
color: theme.palette.text.secondary,
},
label: {
padding: theme.spacing(3),
}
})
class AdjustableGroundoverlay extends React.PureComponent {
constructor(props, context) {
super(props, context)
this.state = {opacity: 0.5}
this.handleChange = this.handleChange.bind(this);
}
handleChange(event, value) {
this.setState(state => ({
opacity: value
}));
}
render() {
return (
<Grid container className={this.props.classes.root} spacing={2}>
<Grid item xs={12}>
<MapWithGroundOverlay
googleMapURL={`https://maps.googleapis.com/maps/api/js?key=${process.env.REACT_APP_GOOGLE_MAPS_API_KEY}&v=3.exp&libraries=geometry,drawing,places`}
loadingElement={<div style={{ height: `100%` }} />}
containerElement={<div style={{ height: `600px` }} />}
mapElement={<div style={{ height: `100%` }} />}
opacity={this.state.opacity}
/>
</Grid>
<Grid item xs={6}>
<Paper className={this.props.classes.paper}>
<Box flexDirection="column">
<FormLabel className={this.props.classes.label}>Overlay opacity</FormLabel>
<Slider
value={this.state.opacity}
min={0}
max={1}
onChange={this.handleChange}
/>
</Box>
</Paper>
</Grid>
</Grid>
);
}
}
AdjustableGroundoverlay.propTypes = {
classes: PropTypes.object.isRequired,
}
export default withStyles(styles)(AdjustableGroundoverlay)
The issue I am experiencing is that the FormLabel and Slider are positioned too close to each other. Upon inspection, it appears that the Slider has a negative margin of -24px:
https://i.sstatic.net/RbcNV.png
This layout causes the content of the FormLabel to overlap the Slider:
https://i.sstatic.net/Th5wV.png
To rectify this issue, I attempted to change the styling of the Slider by including additional classes, as outlined in the Material-UI documentation here:
<Slider
classes={{container: {marginTop: -12}}}
value={this.state.opacity}
min={0}
max={1}
onChange={this.handleChange}
/>
However, despite these changes, the spacing between the FormLabel and the Slider remained unchanged. Any suggestions on what might be wrong with this implementation?
Update: Upon further investigation, I noticed an error message in the console:
https://i.sstatic.net/8FIXp.png
It seems unclear why the key 'container' is considered invalid, given that it is referenced in the Material-UI documentation here.