Как использовать 'settingsToggleClassName' в Griddle

Question

Как settingsToggleClassName требует ввода строки. я реализую это следующим образом

let griddleBtnStyle = { 
    background: 'red' 
}; 

и используя этот стиль здесь

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

Теперь настройки кнопок, имеющих этот класс griddleBtnStyle - Но никаких изменений не произошло, когда я реализовал в этом way.As например, здесь кнопка должна быть красной, но ни одна из них не окрепло.

Можете ли вы сказать мне правильный путь для реализации settingToggleClassName

Answer 1

У вас есть незначительные ошибки, вы писали:

settingsToggleClassName='griddleBtnStyle' 

Вы переносите к свойствам settingsToggleClassNamestring griddleBtnStyle, а не переменная griddleBtnStyle со значением 'red' , Если вы хотите передать переменную его хотел бы это ({}):

settingsToggleClassName={'griddleBtnStyle'} 

Update: К сожалению, я didin't видел:

let griddleBtnStyle = { 
    background: 'red' 
}; 

Я thougth griddleBtnStyle сво класс. Так я, что лучшее решение будет определить в CSS имени класса griddleToggleBtn как это:

.griddleToggleBtn { 
    background-color: red 
} 

и передача СВОЙСТВА settingsToggleClassName класса имя строка «griddleToggleBtn»:

settingsToggleClassName='griddleBtnStyle' 

его должен работать

Answer 2

Игнорировать settingsToggleClassName. Вы использовали бы это только в том случае, если бы вы хотели применить стиль CSS к кнопке переключения, созданной Griddle. BUT, вы не используете эту кнопку - вы сами поставляете, используя settingsIconComponent. Итак, если вы хотите изменить внешний вид вашего RaisedButton, просто установите его свойства и/или стиль ... Например, чтобы изменить фон на красный:

 settingsIconComponent={ 
     <RaisedButton 
      backgroundColor="red" 
      label='Columns' 
      primary={true} 
     />}