如何更改Griddle中Next / Prev Button的样式

Question

实施以下方案

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

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

请参见截图http://imgur.com/a/AhBnc

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

Answer 1

我在这个实现中采取的方法是完全错误的。 应该做的是使用该组件创建一个自定义分页组件，我们将创建一个Next和Previous按钮并下拉选择列表以获取页码，然后在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