Как увеличить вертикальный интервал между Material UI FormLabel и Slider?

Question

Я работаю над картой с наложением изображения, которое имеет настраиваемую непрозрачность. Вот код компонента:

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)

Проблема в том, что FormLabel и Slider слишком близко друг к другу. Если я наведу на них курсор, то у Slider будет отрицательное поле -24px:

Кажется, что содержимое FormLabel находится прямо поверх него:

Я попытался изменить стиль Slider, добавив эти classes к компоненту в соответствии с https://material -ui.com / api / slider / # css :

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

, но расстояние между FormLabel и Slider остается неизменным. Есть идеи, что не так с этой реализацией?

Обновление Я заметил в консоли, что есть эта ошибка:

Я не уверен, почему ключ 'container' недействителен, хотя он упоминается в https://material -ui.com / api / slider / # css .

Answer 1

Я решил эту проблему, поместив ползунок в Box с mt, установленным в 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>

Теперь расстояние между меткой и ползунком больше: