How to use 'settingsToggleClassName' in Griddle - reactjs

Question

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

Answer 1

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

Answer 2

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}
/>}