Как сохранить вложенную строку складной таблицы внутри строки основной таблицы в таблице mui? ⇐ CSS

[Anonymous]

У меня есть таблица Material UI (MUI) с цветом границы и цветом фона. Каждая строка таблицы должна иметь свертываемую строку таблицы. В документации MUI показана отдельная строка таблицы и используется React.Fragment, но я хочу вложить строку свертываемой таблицы в строку основной таблицы. Таким образом, цвет границы и цвет фона остаются одинаковыми для всех строк, даже если они свернуты.
В настоящее время, поскольку строки разделены, цвет фона и границы применяется только к первой строке таблицы. . Я попытался поместить строку складной таблицы внутрь первой строки таблицы, но пользовательский интерфейс выглядит странно. Я также попытался условно удалить нижнюю границу первой строки таблицы и верхнюю границу из строки сворачиваемой таблицы, если состояние открыто, но это не дало желаемого результата из-за оставшегося некоторого пространства. Я ищу лучшее решение, которое бы поддерживало одинаковые цвета границ и фона во всех строках таблицы со свертываемыми строками.
Я включил код и ссылку на CodeSandbox для справки. Заранее благодарим вас за помощь!
https://codesandbox.io/p/sandbox/epic-breeze-xvzykk

Код: Выделить всё

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 (



 setOpen(!open)}
sx={{ color: "white" }}
>
{open ?  : }



{row.name}


{row.calories}


{row.fat}


{row.carbs}


{row.protein}







History




Date
Customer

Amount


Total price ($)




{row.history.map((historyRow) => (


{historyRow.date}


{historyRow.customerId}


{historyRow.amount}


{Math.round(historyRow.amount * row.price * 100) / 100}


))}







);
}

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 (





Dessert (100g serving)
Calories
Fat (g)
Carbs (g)
Protein (g)



{rows.map((row) => (

))}



);
}

Подробнее здесь: https://stackoverflow.com/questions/786 ... ui-table-r