Material UI：并排设置元素的最佳方式

Question

我目前正在使用 Material UI 来设计电子商务项目。我试图弄清楚如何使所有元素（版式、按钮）并排显示在一行中，而不是垂直显示。

有没有办法简单地使用 Material UI 来做到这一点？我应该添加 CSS 吗？我之前尝试将每个元素添加到容器内的网格项中，它有点有效（无法居中），但对于这种情况似乎不是正确的方法。

如果您看到下面的屏幕截图，我正在尝试水平并排设置“T-Shirt Twilight”、图像、“$49.99”、数量输入按钮和“删除”。

我试图并排设置的元素：

  <div className="App">
        {products.map((item, index) => (

          <Grid container item xs={12}>
            <Grid item xs={1} />
            <Grid item xs={10}>

                <Grid item xs={12} container key={item.id}>
                    <Grid item xs={1} />
                    <Grid item xs={10}>

                      <Typography>{item.title}</Typography>
                      <img src={require(`../images/${item.image}`)} className={classes.productImage}></img>
                      <Typography>${(item.quantity * item.price).toFixed(2)}</Typography>

                      <ButtonGroup size="small">
                        <Button type="button" onClick={item.quantity > 1 ? () => decreaseQuantity(index) : null}>-</Button>
                        <Button>{item.quantity}</Button>
                        <Button type="button" onClick={() => increaseQuantity(index)}>+</Button>
                      </ButtonGroup>

                      <Button
                        onClick={() => removeItem(index)}>
                      Remove
                      </Button>

                    </Grid>
                    <Grid item xs={1} />
                </Grid>

            </Grid>
            <Grid item xs={1} />
          </Grid>
        ))}
      </div>

截图供参考：

完整代码：

import React, { useState, useEffect } from 'react';
import './../App.css';
import * as ReactBootStrap from 'react-bootstrap';
import {Link} from 'react-router-dom';
import { getQuantity, getTotal } from '../helpers/helperTools';
import {Grid, Typography,useMediaQuery, useTheme, Container, Button, ButtonGroup} from '@material-ui/core';
import {makeStyles} from '@material-ui/core/styles';

const useStyles = makeStyles((theme) => ({
    productImage: {
      maxWidth: '20%'
}
}))

function Cart({ setQty: setParentQty }) {
    const classes = useStyles();
    const [products, setProducts] = useState([]);

    function updateQty(products){
        /* var holder = 0;
        products.forEach((a, b) => {
          holder = holder + a.quantity
        })*/
        // setQty({quantity: holder})
        // localStorage.setItem('quantity', JSON.stringify({ quantity: newQty }))
        setParentQty({ quantity: getQuantity(products) });
      }

    useEffect(function() {
      const storageItems = JSON.parse(localStorage.getItem('product'));
      const products = storageItems || [];
      setProducts(products);
      updateQty(products);
    }, []);

    function decreaseQuantity(index) {
      if (products[index]){
        const newProducts = products.map((a, b) => {
          if (b === index) return {...a, quantity: a.quantity - 1}
          else return a
        });

        setProducts(newProducts);
        localStorage.setItem('product', JSON.stringify(newProducts))
        updateQty(newProducts)
      }
    }

    function increaseQuantity(index) {
        if (!products[index]) return;

        const newProducts = products.map((a, b) => {
          if (b === index) return {...a, quantity: a.quantity + 1}
          else return a
        })

        setProducts(newProducts)
        localStorage.setItem('product', JSON.stringify(newProducts))
        updateQty(newProducts);
    }

    function removeItem(index){
      const product = products[index];

      if (!product) return;

      const newProducts = products.filter((v, z) => z !== index);
      setProducts(newProducts);

      localStorage.setItem('product', JSON.stringify(newProducts));

      updateQty(newProducts);
    }

     if (products.length === 0) {
       return (
         <div className="App">
          <p>
            Cart Empty
          </p>
          <Link to={`/`}>
          <p>Continue shopping</p>
          </Link>
         </div>)
     }

    return (
      <div className="App">
        {products.map((item, index) => (

          <Grid container item xs={12}>
            <Grid item xs={1} />
            <Grid item xs={10}>

                <Grid item xs={12} container key={item.id}>
                    <Grid item xs={1} />
                    <Grid item xs={10}>

                      <Typography>{item.title}</Typography>
                      <img src={require(`../images/${item.image}`)} className={classes.productImage}></img>
                      <Typography>${(item.quantity * item.price).toFixed(2)}</Typography>

                      <ButtonGroup size="small">
                        <Button type="button" onClick={item.quantity > 1 ? () => decreaseQuantity(index) : null}>-</Button>
                        <Button>{item.quantity}</Button>
                        <Button type="button" onClick={() => increaseQuantity(index)}>+</Button>
                      </ButtonGroup>

                      <Button
                        onClick={() => removeItem(index)}>
                      Remove
                      </Button>

                    </Grid>
                    <Grid item xs={1} />
                </Grid>

            </Grid>
            <Grid item xs={1} />
          </Grid>
        ))}
      </div>

    );
}

export default Cart;

Answer 1

只需使用内联样式即可。我还删除了一些不必要的网格项目。可能您想对网格中的断点进行更多网格化。工作代码沙盒

    <Grid container>
          <Grid item xs={1} />
          <Grid item xs={10} style={{ display: "flex", gap: "1rem" }}>
            <Typography>{item.title}</Typography>
            <img src={item.image} className={classes.productImage}></img>
            <Typography>${(item.quantity * item.price).toFixed(2)}</Typography>

            <ButtonGroup size="small">
              <Button
                type="button"
                onClick={
                  item.quantity > 1 ? () => decreaseQuantity(index) : null
                }
              >
                -
              </Button>
              <Button>{item.quantity}</Button>
              <Button type="button" onClick={() => increaseQuantity(index)}>
                +
              </Button>
            </ButtonGroup>

            <Button onClick={() => removeItem(index)}>Remove</Button>
          </Grid>
          <Grid item xs={1} />
        </Grid>