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

Question

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

testMockServer_finish

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

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

classes

，但是 <Slider classes={{container: {marginTop: -12}}} value={this.state.opacity} min={0} max={1} onChange={this.handleChange} /> 和FormLabel之间的间距保持不变。知道这个实现有什么问题吗？

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

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

Answer 1

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

1

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