Question

我正在向材质UI表添加波纹效果。我已经尝试了很多解决方案，但是似乎都没有一个完美的解决方案。他们都有自己的怪癖。

我确实找到了this文章，但是解决方案投入了很多精力。到目前为止，我的尝试似乎可以（可能）导致可能的解决方案？我的表格行要么以错误的高度（而不是占用多列）结尾，要么以奇怪的居中结尾..不确定如何处理。

<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和{之间的元素{1}}。

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

这是一个例子：

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

1 个答案: