如何让反应组件位于另一个组件之上答案

【问题标题】：How to have react component sit on top of another component如何让反应组件位于另一个组件之上
【发布时间】：2020-04-28 14:49:16
【问题描述】：

我正在使用具有扩展更多选项的表格，以包含每个特定行的更多详细信息。我正在使用滑块来扩展表格。目前，我的ExpandToggle 组件位于表格的列中，它将表格向左扩展并推送数据。相反，我想让我的“ExpandToggle”组件覆盖Fat(g)Carbs(g) 和Protein(g) 行并坐在表格顶部而不显示这3 行的数据而不是拉伸表格。

我创建了一个codesandbox 来准确显示我正在使用的内容。

当前出现的内容：

表体代码：

<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>

【问题讨论】：

标签： javascript css reactjs components material-ui

【解决方案1】：

您需要覆盖此组件MuiTableCell 的样式，而className 是MuiTableCell-root。有多种方法可以自定义 MaterialUI 组件，您可以在 https://material-ui.com/customization/components/ 找到详细的文档。如果您需要任何帮助，请告诉我。

【讨论】：

【解决方案2】：

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

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

演示.js

const useStyles = makeStyles({
  table: {
    minWidth: 650
  },
  cc: { position: "relative" }
});

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

只是一个想法，sandbox

【讨论】：