How to change style of Next/Prev Button in Griddle

Question

Implemented following scenario

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

Now this provides me a Next Button with a wrapper div above button, and text-hide class is applied to that div not the button and hence border and background of next button remains as it is.

Please see screenshot https://i.stack.imgur.com/ffsqs.jpg

make background and border outside NEXT button transparent, what should i do

Answer 1

The approach I have taken in this implementation is totally wrong. What should be done is that create a custom pagination component with that component we will create a Next and Previous button and drop down select list for page number, and then include that custom component in the Griddle section

The value passed to customPagerComponent should be a React class, not simply jsx. To take your first example you would probably want to do this:

class MyCustomPagerComponent extends Component {
  // boilerplate react stuff

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

Then in your Griddle jsx you would want to do:

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

Both next and previous button will come in this new custom pagination component.
More info on this Griddle Issue https://github.com/GriddleGriddle/Griddle/issues/530