React-Table 组件的样式答案

【问题标题】：Styling for React-Table componentReact-Table 组件的样式
【发布时间】：2022-02-14 08:09:02
【问题描述】：

我正在尝试正确设置组件的样式。目前，该表工作得很好，但它的样式并不理想，通常这很容易用顺风修复，但组件布局让人很难确切地知道如何设置它的样式。

这是我引用的例子，

https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/kitchen-sink

现在具体来说，我要更改的是组函数。目前使用表情符号的工作，我真的很想成为一个合适的按钮，让用户非常清楚地了解组件的功能，如下所示。

<table className="w-full text-md bg-white shadow-md rounded mb-4" {...getTableProps()}>
          <thead>
            {headerGroups.map(headerGroup => (
              <tr {...headerGroup.getHeaderGroupProps()}>
                {headerGroup.headers.map(column => (
                  <th className={td_header} {...column.getHeaderProps()}>
                    <div>
                      {column.canGroupBy ? (
                        // If the column can be grouped, let's add a toggle
                        <span {...column.getGroupByToggleProps()}>
                          {column.isGrouped ? 'Click to Un-Group ???? Click to Sort!' : ' Click to Group ???? Click to Sort!'}
                        </span>
                      ) : null}
                      <span {...column.getSortByToggleProps()}>
                        {column.render('Header')}
                        {/* Add a sort direction indicator */}
                        {column.isSorted
                          ? column.isSortedDesc
                            ? ' ????'
                            : ' ????'
                          : ''}
                      </span>
                    </div>
                    {/* Render the columns filter UI */}
                    <div>{column.canFilter ? column.render('Filter') : null}</div>
                  </th>
                ))}

现在理想情况下，我想要这样的组和过滤器切换，取自顺风 https://tailwindcss.com/components/buttons

<div class="inline-flex">
  <button class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded-l">
    Group
  </button>
  <button class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded-r">
    Filter
  </button>
</div>

考虑到它使用的字符串不是组件并且没有我可以看到的任何样式，如何有效地设置样式？

提前致谢，

【问题讨论】：

标签： css reactjs react-table tailwind-css

【解决方案1】：

您的问题中出现的字符串不是一个组件，但它很容易成为。这些元素不一定是字符串； react-table 是一个无头库，因此您可以随意更改视觉效果。这里有多种可能的解决方案。一种解决方案是通过为该排序图标定义一个自定义功能组件来替换整个三元组：

const sortIcon = (sorted, sortedDesc) => {
  if (sortedDesc) {
    return (<h1> this is arbitrary </h1>);
  } else if (sorted) {
    return (<h2> more arbitrary </h2>);
  } else {
    return null;
  }
}

然后替换三元：

<span {...column.getSortByToggleProps()}>
                        {column.render('Header')}
                        {/* Add a sort direction indicator */}
                        {sortIcon(column.isSorted, column.isSortedDesc)}
                      </span>

这可能是一种不好的方法，除此之外还未经测试，但关键是 HTML/JSX 的东西是任意的。这些表情符号字符串可以用任何形式的有效 JSX 替换。你也可以用column.isGrouped 三元组做类似的事情！如果您还不熟悉 JSX tutorials，可能值得一看，或者如果您想继续添加功能，请重新熟悉 exactly what a column Object contains。

（链接警告：每个不同的useX 钩子都为column/row/etc 对象添加了更多内容，所以我只链接了核心useTable 一个）

【讨论】：