如何使反应组件位于另一个组件的顶部

Question

我正在使用一个具有更多扩展选项的表，以便为每个特定行包括更多详细信息。我正在使用滑块来扩展表格。当前，我的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>

Answer 1

您需要此组件MuiTableCell的替代样式，并且className为MuiTableCell-root。自定义MaterialUI组件有几种方法，您可以在https://material-ui.com/customization/components/中找到详细的文档。让我知道您是否需要任何帮助。

Answer 2

如@Aditya所述，您应该重写SliderInfo组件的样式，实现类似tooltip（使用position属性）的样式，如下所示SliderInfo.js

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

demo.js

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

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

只是一个想法，sandbox