更改 React-Table 默认样式

Question

我有一个 react-table，每行都有一个箭头，当单击它时，它会展开为另一个 react-table.

的子组件

我想更改该箭头的颜色，并尽可能将其移至列的右侧。有谁知道这是否可能以及如何去做。我附上了 table 的代码图片以及它当前的呈现方式。感谢您的帮助！

Code example

Answer 1

可以使用 Custom Expander。您可以像这样定义您的列：

columns: [
  // other columns...,
  {
    expander: true,
    Header: () => <strong>More</strong>,
    width: 65,
    Expander: ({ isExpanded, ...rest }) =>
      <div>
        {isExpanded
          ? <span>&#x2299;</span>
          : <span>&#x2295;</span>}
      </div>,
    style: {
      cursor: "pointer",
      fontSize: 25,
      padding: "0",
      textAlign: "center",
      userSelect: "none",
      color: "green"
    },
    Footer: () => <span>&hearts;</span>
  }
]

更改 React-Table 默认样式

Change React-Table default styling

javascript

css

reactjs

styling

react-table