Используйте ButtonBase для эффекта ряби в интерфейсе материалов TableRow

Question

Я хочу добавить волновой эффект в таблицу UI Material. Я перепробовал целый ряд решений, но ни одно из них, похоже, не работает идеально. Все они имеют свои причуды.

Я нашел эту статью, но в решение было вложено не так много усилий. Мои испытания пока кажутся, что они могут привести к возможному решению (надеюсь)? Строки моей таблицы либо оказываются неправильной высоты (и не занимают несколько столбцов), либо оказываются странно центрированными ... не знаю, как с ними обращаться.

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 может легко использовать ButtonBase через свойство button.

Вот пример: