关于CSS：如何增加Material UI FormLabel和Slider之间的垂直间距？


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

我正在处理具有可调整不透明度的图像叠加层的地图。这是组件代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
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={}
            containerElement={}
            mapElement={}
            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：

enter

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

，但FormLabel和Slider之间的间距保持不变。知道这个实现有什么问题吗？

更新
我在控制台中注意到存在此错误：

enter

相关讨论

我通过将滑块放在mt设置为1的Box中解决了此问题：

1
2
3
4
5
6
7
8
9
10
11
12
13
      <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>

现在，标签和滑块之间的间距更大：

enter