How to increase the vertical spacing between a Material UI FormLabel and Slider?

Question

I'm working on a map with an image overlay that has adjustable opacity. Here is the component code:

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 problem is that the FormLabel and Slider are too close together. If I hover over them, I see that the Slider has a negative margin of -24px:

It seems like the content of the FormLabel therefore sits directly on top of it:

I've tried to change the styling of the Slider by adding these classes to the component in accordance with https://material-ui.com/api/slider/#css:

          <Slider
            classes={{container: {marginTop: -12}}}
            value={this.state.opacity}
            min={0}
            max={1}
            onChange={this.handleChange}
          />

but the spacing between the FormLabel and the Slider remains the same. Any idea what is wrong with this implementation?

Update I've noticed in the console that there is this error:

I'm not sure why the key 'container' is not valid though since it is mentioned in https://material-ui.com/api/slider/#css.

Answer 1

I resolved this by putting the slider in a Box with mt set to 1:

      <Paper className={this.props.classes.paper}>
        <Box flexDirection="column">
          <FormLabel className={this.props.classes.label}>Overlay opacity</FormLabel>
          <Box mt={1}>
            <Slider
              value={this.state.opacity}
              min={0}
              max={1}
              onChange={this.handleChange}
            />
          </Box>
        </Box>
      </Paper>

Now there is more spacing between the label and the slider: