如何将嵌套的可折叠表格行保留在 mui 表反应的主 tabe 行内？

Question

我有一个带有边框颜色和背景颜色的 Material UI (MUI) 表。每个表行都需要有一个可折叠的表行。 MUI 的文档显示了一个单独的表行并使用 React.Fragment，但我想将可折叠表行嵌套在主表行内。这样，即使折叠时，所有行的边框颜色和背景颜色也保持一致。

目前，由于行是分开的，背景和边框颜色仅适用于第一个表格行。我尝试将可折叠表格行放在第一个表格行内，但用户界面看起来很奇怪。如果状态打开，我还尝试有条件地从第一个表行中删除边框底部，并从可折叠表行中删除边框顶部，但由于剩余一些空间，它没有达到预期的结果。我正在寻找一种更好的解决方案，可以在具有可折叠行的所有表格行中保持一致的边框和背景颜色。

我已包含代码和 CodeSandbox 链接以供参考。预先感谢您的帮助！ https://codesandbox.io/p/sandbox/confident-wiles-tpqwdl?file=%2Fsrc%2FDemo.js

import * as React from "react";
import PropTypes from "prop-types";
import Box from "@mui/material/Box";
import Collapse from "@mui/material/Collapse";
import IconButton from "@mui/material/IconButton";
import Table from "@mui/material/Table";
import TableBody from "@mui/material/TableBody";
import TableCell from "@mui/material/TableCell";
import TableContainer from "@mui/material/TableContainer";
import TableHead from "@mui/material/TableHead";
import TableRow from "@mui/material/TableRow";
import Typography from "@mui/material/Typography";
import Paper from "@mui/material/Paper";
import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp";

function createData(name, calories, fat, carbs, protein, price) {
  return {
    name,
    calories,
    fat,
    carbs,
    protein,
    price,
    history: [
      {
        date: "2020-01-05",
        customerId: "11091700",
        amount: 3,
      },
      {
        date: "2020-01-02",
        customerId: "Anonymous",
        amount: 1,
      },
    ],
  };
}

function Row(props) {
  const { row } = props;
  const [open, setOpen] = React.useState(false);

  return (
    <React.Fragment>
      <TableRow
        // sx={{ "& > *": { borderBottom: "unset" } }}
        sx={{
          position: "relative",
          zIndex: 0,
          backgroundClip: "padding-box",
          borderRadius: "10px",
          "&:after": {
            border: "1px solid transparent",
            position: "absolute",
            top: 1,
            left: 1,
            right: 1,
            bottom: 1,
            background:
              "linear-gradient(#161753 0 0) padding-box,linear-gradient(to right, #4b4e8b, #4b4e8b) border-box",
            content: '""',
            zIndex: -1,
            borderRadius: "10px",
          },
        }}
      >
        <TableCell sx={{ color: "yellow" }}>
          <IconButton
            aria-label="expand row"
            size="small"
            onClick={() => setOpen(!open)}
            sx={{ color: "white" }}
          >
            {open ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
          </IconButton>
        </TableCell>
        <TableCell sx={{ color: "yellow" }} component="th" scope="row">
          {row.name}
        </TableCell>
        <TableCell sx={{ color: "yellow" }} align="right">
          {row.calories}
        </TableCell>
        <TableCell sx={{ color: "yellow" }} align="right">
          {row.fat}
        </TableCell>
        <TableCell sx={{ color: "yellow" }} align="right">
          {row.carbs}
        </TableCell>
        <TableCell sx={{ color: "yellow" }} align="right">
          {row.protein}
        </TableCell>
      </TableRow>
      <TableRow>
        <TableCell
          sx={{ color: "black" }}
          style={{ paddingBottom: 0, paddingTop: 0 }}
          colSpan={6}
        >
          <Collapse in={open} timeout="auto" unmountOnExit>
            <Box sx={{ margin: 1 }}>
              <Typography variant="h6" gutterBottom component="div">
                History
              </Typography>
              <Table size="small" aria-label="purchases">
                <TableHead>
                  <TableRow>
                    <TableCell sx={{ color: "black" }}>Date</TableCell>
                    <TableCell sx={{ color: "black" }}>Customer</TableCell>
                    <TableCell sx={{ color: "black" }} align="right">
                      Amount
                    </TableCell>
                    <TableCell sx={{ color: "black" }} align="right">
                      Total price ($)
                    </TableCell>
                  </TableRow>
                </TableHead>
                <TableBody>
                  {row.history.map((historyRow) => (
                    <TableRow key={historyRow.date}>
                      <TableCell
                        sx={{ color: "black" }}
                        component="th"
                        scope="row"
                      >
                        {historyRow.date}
                      </TableCell>
                      <TableCell sx={{ color: "black" }}>
                        {historyRow.customerId}
                      </TableCell>
                      <TableCell sx={{ color: "black" }} align="right">
                        {historyRow.amount}
                      </TableCell>
                      <TableCell sx={{ color: "black" }} align="right">
                        {Math.round(historyRow.amount * row.price * 100) / 100}
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </Box>
          </Collapse>
        </TableCell>
      </TableRow>
    </React.Fragment>
  );
}

Row.propTypes = {
  row: PropTypes.shape({
    calories: PropTypes.number.isRequired,
    carbs: PropTypes.number.isRequired,
    fat: PropTypes.number.isRequired,
    history: PropTypes.arrayOf(
      PropTypes.shape({
        amount: PropTypes.number.isRequired,
        customerId: PropTypes.string.isRequired,
        date: PropTypes.string.isRequired,
      })
    ).isRequired,
    name: PropTypes.string.isRequired,
    price: PropTypes.number.isRequired,
    protein: PropTypes.number.isRequired,
  }).isRequired,
};

const rows = [
  createData("Frozen yoghurt", 159, 6.0, 24, 4.0, 3.99),
  createData("Ice cream sandwich", 237, 9.0, 37, 4.3, 4.99),
  createData("Eclair", 262, 16.0, 24, 6.0, 3.79),
  createData("Cupcake", 305, 3.7, 67, 4.3, 2.5),
  createData("Gingerbread", 356, 16.0, 49, 3.9, 1.5),
];

export default function CollapsibleTable() {
  return (
    <TableContainer component={Paper}>
      <Table aria-label="collapsible table">
        <TableHead>
          <TableRow>
            <TableCell />
            <TableCell>Dessert (100g serving)</TableCell>
            <TableCell align="right">Calories</TableCell>
            <TableCell align="right">Fat&nbsp;(g)</TableCell>
            <TableCell align="right">Carbs&nbsp;(g)</TableCell>
            <TableCell align="right">Protein&nbsp;(g)</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {rows.map((row) => (
            <Row key={row.name} row={row} />
          ))}
        </TableBody>
      </Table>
    </TableContainer>
  );
}

Answer 1

使用行的样式在组件外部设置一个变量：

const rowStyles = {{ ... }}}

然后将其应用到外行和内行：

<TableRow sx={rowStyles}>