React-Table 组件的样式

Question

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

这是我引用的例子，

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

现在理想情况下我想要这样的组和过滤器切换，取自 tailwind 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>

考虑到它使用的字符串不是组件并且没有任何我认为涉及的样式，如何有效地对其进行样式设置？

提前致谢，

Answer 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 if you're not already familiar, or re-familiarizing yourself with exactly what a column Object contains。

(link 警告：每个不同的 useX 钩子都会向 column/row/etc 对象添加更多内容，所以我只是 linked核心useTable一）

React-Table 组件的样式

Styling for React-Table component

css

reactjs

react-table

tailwind-css