如何增加 Material UI FormLabel 和 Slider 之间的垂直间距？答案

【问题标题】：How to increase the vertical spacing between a Material UI FormLabel and Slider?如何增加 Material UI FormLabel 和 Slider 之间的垂直间距？
【发布时间】：2019-10-17 06:17:25
【问题描述】：

我正在制作一张带有可调节不透明度的图像叠加层的地图。下面是组件代码：

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 的内容因此直接位于其顶部：

我尝试通过根据https://material-ui.com/api/slider/#css 将这些classes 添加到组件中来更改Slider 的样式：

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

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

更新我在控制台中注意到有这个错误：

我不确定为什么密钥“容器”无效，因为它在 https://material-ui.com/api/slider/#css 中提到。

【问题讨论】：

你试过调整line-height吗？
我有，但这也会改变顶部的间距，我真正想要的只是增加FormLabel 和Slider 之间的间距。我在Slider 的container 元素中添加了margin-top 的-12px（而不是-24px），这对我来说看起来不错；唯一的问题是如何将其传递到 Materialise UI 样式中？
container 需要指向类名（例如通过withStyles 生成）而不是样式属性。
Simple Slider demo 显示了向 Slider 添加填充以使标签进一步向上间隔的示例。

标签： css reactjs material-ui

【解决方案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>

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

【讨论】：