如何在 React 材料中的列表项之间创建一个空格

Question

我学习 React Material，我想在 React Material List 的每一行之间留出空格，但我不知道该怎么做。

我通过Material docs 阅读但无法弄清楚这一点，因为我是新手

我尝试这样的事情：

  <li className="list-group-item" key={el.id}>
                {el.title}
            </li>

使用list-group-item，因为它适用于另一个列表，但现在不起作用。

Picture of two list row that dont have vertical space between

  import React, { Component } from 'react';
import { Grid, Paper, Typography } from "@material-ui/core";
import Card from "@material-ui/core/Card";
import CardActionArea from "@material-ui/core/CardActionArea";
import CardActions from "@material-ui/core/CardActions";
import CardContent from "@material-ui/core/CardContent";
import CardMedia from "@material-ui/core/CardMedia";
import Button from "@material-ui/core/Button";
import { connect } from "react-redux";
import { makeStyles } from '@material-ui/core/styles';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemText from '@material-ui/core/ListItemText';
import ListItemAvatar from '@material-ui/core/ListItemAvatar';
import Avatar from '@material-ui/core/Avatar';
import ImageIcon from '@material-ui/icons/Image';
import WorkIcon from '@material-ui/icons/Work';
import BeachAccessIcon from '@material-ui/icons/BeachAccess';
import Divider from '@material-ui/core/Divider';
import { withStyles } from '@material-ui/styles';
const styles = theme => ({
    root: {
        background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
        border: 0,
        borderRadius: 3,
        boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
        color: 'white',
        padding: '0 30px',
    },
});
export class Posts extends Component {
    constructor() {
        super();
    }

    componentDidUpdate(prevProps) {

    }

    render() {
        const { classes } = this.props;
        return (
            <ul className="list-group list-group-flush">
                {this.props.books.map(el => (
                    <List className={classes.root}>
                        <ListItem>
                            <ListItemText primary="Title" secondary={el.title} />
                        </ListItem>
                        <Divider variant="middle" component="li" />
                        <ListItem>
                            <ListItemText primary="Author" secondary={el.author} />
                        </ListItem>
                        <Divider variant="middle" component="li" />
                        <ListItem>
                            <ListItemText primary="Genre" secondary={el.genre} />
                        </ListItem>
                        <Divider variant="middle" component="li" />
                        <ListItem>
                            <ListItemText primary="Price" secondary={el.price} />
                        </ListItem>
                    </List>
                ))}
            </ul>
        );
    }
}

function mapStateToProps(state) {
    return {
        books: state.reducer.booksList
    }
}

export default connect(mapStateToProps)(withStyles(styles)(Posts));

这是列表中的一行：

 <book id="13543">
    <author>Roger, more</author>
    <title>Helping hand club</title>
    <genre>Space</genre>
    <price>234.00</price>
  </book>

Answer 1

您可以使用CSS 来做到这一点，

const styles = theme => ({
    root: {
        //Your existing styles
        margin: 5px 0;
    },
});