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

Question

实现以下场景

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

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

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

score 0 · Accepted Answer

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

1 回答 1