0

As settingsToggleClassName requires string input. I am implementing this in the following way

let griddleBtnStyle = {
  background: 'red'
};

and using this style in here

  <Griddle
          useGriddleStyles={false}
          results={this.getGriddleData()}
          resultsPerPage={10}
          tableClassName='table'
          showFilter={true}
          settingsText={''}
          settingsToggleClassName='griddleBtnStyle'
          settingsIconComponent={
            <RaisedButton
              label='Columns'
              primary={true}
            />}
          showSettings={true}
        />

Now, settings button having this class griddleBtnStyle - But no changes occured when I implemented in this way.As per eg here button should be red but none has occred.

Can you tell me the right way to implement settingToggleClassName

Sandeep Chikhale
  • 1,505
  • 2
  • 21
  • 36

2 Answers2

0

You have a minor error, you have written:

settingsToggleClassName='griddleBtnStyle'

You transfer to properties settingsToggleClassName string griddleBtnStyle, not variable griddleBtnStyle with value 'red'. If you want transfer variable its should like this ({}):

settingsToggleClassName={'griddleBtnStyle'}

Update: Sorry, i didin't saw the:

let griddleBtnStyle = {
  background: 'red'
};

I thougth griddleBtnStyle its a class. So i thing the best solution will be define in CSS class name griddleToggleBtn like this:

.griddleToggleBtn {
    background-color: red
}

and transfer to propertie settingsToggleClassName class name string 'griddleToggleBtn':

settingsToggleClassName='griddleBtnStyle'

its should work

Piotr Białek
  • 2,569
  • 1
  • 17
  • 26
  • what do you mean writting filter? – Piotr Białek Dec 05 '16 at 11:10
  • Whitcik - Please look edited version, new info added at bottom- edit is peer review. same info below.....Tried solution mentioned by you but Raised Button element remains the same With solution settingsToggleClassName={'griddleBtnStyle'}. I get – Sandeep Chikhale Dec 05 '16 at 11:26
  • So as i understand now...i should create a CSS file and place a class - griddleToggleBtn inside the CSS and use that as the value of settingsToggleClassName ... and there isn't a way to use a variable like griddleBtnStyle to change the style of settings button. Sorry I mentioning it here but what I want is to replace settings button in griddle with a Material UI button...is there any other way to do this – Sandeep Chikhale Dec 05 '16 at 12:39
0

Ignore settingsToggleClassName. You would only use that if you wanted to apply CSS style to the toggle button created by Griddle. BUT, you aren't using that button - you are supplying your own, using settingsIconComponent. So, if you want to change the appearance of your RaisedButton, just set its properties and/or style... For example, to change background to red:

      settingsIconComponent={
        <RaisedButton
          backgroundColor="red"
          label='Columns'
          primary={true}
        />}
Jeff McCloud
  • 5,777
  • 1
  • 19
  • 21
  • Implemented this intially but what remains is a border outside the the Raised Button Component.To get rid of that we need to add background: transparent and border: none to button element with class = settings, not able to get hold of that element I tried all style props available in raised button control... can you give any idea -- http://imgur.com/a/cfaX3 – Sandeep Chikhale Dec 07 '16 at 14:29