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

Posted 2023-02-22

【中文标题】如何在 React 材料中的列表项之间创建一个空格

【英文标题】：how to create a space between list items in React material

【发布时间】：2019-11-21 22:15:26

【问题描述】：

我学习 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>

【问题讨论】：

iirc 你可以像这样从 Material ui 导入多个组件：import Button, Avatar . . . from @material-ui/core

谢谢，我知道这看起来很乱，因为我学习了 :)

【参考方案1】：

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

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

【讨论】：

我想要每行之间有一个空格。我认为您的代码在每个 ListItem 上都有一个空间。我在每一行都有 4 个 ListItem。抱歉，我的 Q 不清楚

您可以为 ListItemText 组件应用相同的样式。发布您的 ListItemText 组件，以便我们提供帮助。

我添加了ListItemText 主要标题类似于“作者”，次要类似于作者的内容是“Roger More”

删除我从styles 和<ListItem> 建议的样式。

谢谢，这很容易不是:)