时间戳

首页 > 解决方案 > React-Table 组件的样式

css - React-Table 组件的样式

问题描述

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

这是我引用的例子，

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>

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

提前致谢，

标签： cssreactjsreact-tabletailwind-css

解决方案

您的问题中出现的字符串不是一个组件，但它很容易成为。这些元素不一定是字符串；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 教程，或者如果您想继续添加功能，请重新熟悉列 Object 包含的确切内容，这可能值得一看。

（链接警告：每个不同的钩子都向/ /etc 对象useX添加了更多东西，所以我只链接了核心的一个）columnrowuseTable

推荐阅读