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

问题描述

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

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

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

标签： reactjsmaterial-ui

解决方案

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

解决此问题的一种方法是使用ListandListItem而不是Table. 可以通过属性ListItem轻松使用。ButtonBasebutton

这是一个例子：

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

问题描述

解决方案

推荐阅读