使用 ButtonBase 在 Material UI TableRow 上产生波纹效果

Question

我希望为 Material UI 表添加涟漪效果。我尝试了一大堆解决方案，但似乎没有一个能完美运行。他们都有自己的怪癖。

我确实找到了this 的文章，但没有在解决方案上投入太多精力。到目前为止，我的试验似乎可以找到可能的解决方案（希望如此）？我的表格行要么最终是错误的高度（并且不占用多列），要么最终被奇怪地居中..不知道如何处理。

https://codesandbox.io/s/pmry2x11vj

<div className="App">
  <Router>
    <Grid container>
      <Grid item xs={12}>
        <Card>
          <Table>
            <TableBody>
              <TableRow hover>
                <TableCell>test</TableCell>
                <TableCell>Property</TableCell>
              </TableRow>
              <TableRow
                hover
                component={Link}
                to={"/"}
                style={{ textDecoration: "none" }}
              >
                <TableCell>Other</TableCell>
                <TableCell>Row</TableCell>
              </TableRow>
              <ButtonBase style={{ width: "100%", height: "100%" }}>
                <TableRow
                  hover
                  component={Link}
                  to={"/"}
                  style={{ textDecoration: "none" }}
                >
                  <TableCell>row</TableCell>
                  <TableCell>is weirdly centered</TableCell>
                </TableRow>
              </ButtonBase>
              <ButtonBase style={{ width: "100%", height: "100%" }}>
                <TableRow
                  hover
                  component={Link}
                  to={"/"}
                  style={{
                    textDecoration: "none",
                    width: "100%",
                    height: "100%"
                  }}
                >
                  <TableCell>row</TableCell>
                  <TableCell>
                    not right height, missing space on right
                  </TableCell>
                </TableRow>
              </ButtonBase>
              <TableRow
                hover
                component={Link}
                to={"/"}
                style={{
                  textDecoration: "none",
                  width: "100%",
                  height: "100%"
                }}
              >
                <ButtonBase style={{ width: "100%", height: "100%" }}>
                  <TableCell>row</TableCell>
                  <TableCell>
                    not right height, missing space on left / right
                  </TableCell>
                </ButtonBase>
              </TableRow>
              <TableRow>
                <TableCell style={{ width: "100%", height: "100%" }}>
                  <ButtonBase style={{ width: "100%", height: "100%" }}>
                    Extra
                  </ButtonBase>
                </TableCell>
                <TableCell>Normal Row</TableCell>
              </TableRow>
              <TableRow>
                <TableCell>Extra</TableCell>
                <TableCell>Normal Row</TableCell>
              </TableRow>
            </TableBody>
          </Table>
        </Card>
      </Grid>
    </Grid>
  </Router>
</div>

Answer 1

我认为没有一种可行的方法可以将ButtonBase 用作Table 中的一行（至少在不覆盖几乎所有关于Table、TableRow 和TableCell 的情况下，这样你没有使用默认的表格 html 元素）。您的所有尝试都会导致无效的 html，因为要么将 tr 替换为其他元素，要么在 table 和 tr 之间或 tr 和 td 之间有其他元素。

解决此问题的一种方法是使用List 和ListItem 而不是Table。 ListItem 可以通过button 属性轻松使用ButtonBase。

这是一个例子：