在表格中相互放置排序图标的正确（React / MaterialUI）方法

Question

我在tsx组件中使用以下代码。我还不熟悉correct layout options。
我有一个working sandbox。

import React from "react";
import { ArrowDropUp, ArrowDropDown } from "@material-ui/icons";
import { withStyles } from "@material-ui/core/styles";

function SvgMaterialIcons(props) {
  const { classes } = props;
  return (
    <table>
      <thead>
        <tr>
          <td>
            TITLE <ArrowDropUp /> <ArrowDropDown />
          </td>
        </tr>
        <tr>
          <td>
            <input type="text" />
          </td>
        </tr>
      </thead>
    </table>
  );
}

我应该在material.ui中使用哪个布局组件来将排序图标彼此对齐？

Answer 1

这可能是一个讨厌的兔子洞，其图标的样式看起来令人满意。为什么不看看这个Sort icon。它可能为您工作，并节省您的时间。