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

Posted 2023-02-23

【中文标题】如何让反应组件位于另一个组件之上

【英文标题】：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>

【参考方案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