Javascript 如何让react组件位于另一个组件之上

我正在使用一个表，该表有一个“扩展更多”选项，可以包含每个特定行的更多详细信息。我正在使用滑块使表格展开。当前，my

ExpandToggle

组件位于表的列中，该列将表向左展开并推送数据。相反，我想让我的“ExpandToggle”组件覆盖

Fat（g）

Carbs（g）

和

Protein（g）

行，并坐在表格顶部，不显示这3行的数据，而不是拉伸表格

我创建了一个新的应用程序，以准确显示我正在使用的内容

当前显示的内容：

表体代码：

<TableBody>
          {rows.map(row => (
            <TableRow key={row.name}>
              <TableCell component="th" scope="row">
                {row.name}
              </TableCell>
              <TableCell align="right">{row.calories}</TableCell>
              <TableCell align="right">{row.fat}</TableCell>
              <TableCell align="right">{row.carbs}</TableCell>
              <TableCell align="right">{row.protein}</TableCell>
              <TableCell align="right">
                <ExpandToggle />
              </TableCell>
            </TableRow>
          ))}
        </TableBody>

{rows.map（row=>(
{row.name}
{row.carries}
{row.fat}
{row.carbs}
{row.protein}
))}

您需要覆盖此组件的样式

MuiTableCell

，

className

是

MuiTableCell root

。有几种定制MaterialUI组件的方法，您可以在此处找到详细的文档。如果您需要帮助，请告诉我。

您需要覆盖此组件的样式

MuiTableCell

，

className

是

MuiTableCell root

。有几种定制MaterialUI组件的方法，您可以在此处找到详细的文档。如果您需要帮助，请告诉我。

正如@Aditya所提到的，您应该覆盖SliderInfo组件的样式，实现工具提示（使用位置属性）之类的功能，如下所示
SliderInfo.js

const useStyles = makeStyles(theme => ({
  root: {
    backgroundColor: "#E2F1F1",
    position: "absolute",
    bottom: "0",
    left: "-360%",
    height: "100%",
    width: "400%"
  },
  listItem: {
    divider: true
  }
}));

demo.js

---

正如@Aditya提到的，您可以覆盖SliderInfo组件的样式，实现工具提示（使用位置属性）之类的功能，如下所示
SliderInfo.js

const useStyles = makeStyles(theme => ({
  root: {
    backgroundColor: "#E2F1F1",
    position: "absolute",
    bottom: "0",
    left: "-360%",
    height: "100%",
    width: "400%"
  },
  listItem: {
    divider: true
  }
}));

demo.js

作为一个想法

 <TableCell
                classes={{
                  root: classes.cc
                }}
                align="right"
              >
                <ExpandToggle />
              </TableCell>