如何在 Griddle 中使用'settingsToggleClassName'

Question

作为setterstoggleclassName需要字符串输入。我正在以以下方式实施此操作

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-但是当我以这种方式实现时不会发生任何更改。

您可以告诉我正确的方法来实现设置ToggleClassName

Answer 1

您有一个小错误，您已经写了：

settingsToggleClassName='griddleBtnStyle'

您转移到属性settingsToggleClassName string GriddleBtnstyle，而不是具有值'red'的可变griddleBtnStyle。如果要转移变量，它的应该这样（ {} ）：

settingsToggleClassName={'griddleBtnStyle'}

更新：抱歉，我没有看到：

let griddleBtnStyle = {
  background: 'red'
};

i Thougth griddleBtnStyle它的班级。因此，我最好的解决方案将在CSS类名称griddleToggleBtn中定义：

.griddleToggleBtn {
    background-color: red
}

并转移到propertie settingsToggleClassName类名称字符串'griddletogglebtn'：

settingsToggleClassName='griddleBtnStyle'

它应该有效

Answer 2

忽略 settingsToggleClassName。仅当您想将CSS样式应用于Griddle创建的切换按钮时，才会使用它。但，您没有使用该按钮 - 使用settingsIconComponent提供了自己的服务。因此，如果您想更改凸起的视野的外观，只需设置其属性和/或样式...例如，将背景更改为红色：

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