如何在 Griddle 中更改下一个/上一个按钮的样式答案

【问题标题】：How to change style of Next/Prev Button in Griddle如何在 Griddle 中更改下一个/上一个按钮的样式
【发布时间】：2016-12-13 08:14:01
【问题描述】：

实现了以下场景

  nextClassName={'text-hide'}
  nextText={''}
  nextIconComponent={
    <RaisedButton
      label='Next'  
  />}

现在这为我提供了一个在按钮上方带有包装 div 的 Next Button，并且 text-hide 类应用于该 div 而不是按钮，因此下一个按钮的边框和背景保持原样。

使NEXT按钮外的背景和边框透明，我该怎么办

【问题讨论】：

【解决方案1】：

我在这个实现中采用的方法是完全错误的。应该做的是使用该组件创建一个自定义分页组件，我们将创建一个下一个和上一个按钮并下拉选择页码列表，然后将该自定义组件包含在 Griddle 部分中

传递给 customPagerComponent 的值应该是一个 React 类，而不是简单的 jsx。以您的第一个示例为例，您可能希望这样做：

class MyCustomPagerComponent extends Component {
  // boilerplate react stuff

  render() {
    // jsx for your component
  }
}

然后在你想要做的 Griddle jsx 中：

import MyCustomPagerComponent from 'path/to/component';
<Griddle
  ...
  customPagerComponent={MyCustomPagerComponent}
>

下一个和上一个按钮都将出现在这个新的自定义分页组件中。
有关此 Griddle 问题的更多信息 https://github.com/GriddleGriddle/Griddle/issues/530

【讨论】：