如何在Griddle中使用'settingsToggleClassName‘

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中实现时，没有发生任何变化，例如这里的按钮应该是红色的，但没有一个有occred。

你能告诉我实现settingToggleClassName的正确方法吗？

Answer 1

你有一个小错误，你写了：

settingsToggleClassName='griddleBtnStyle'

您传输到属性settingsToggleClassName string griddleBtnStyle，而不是值为'red'的变量griddleBtnStyle。如果你想要传递变量，它应该是这样的({})：

settingsToggleClassName={'griddleBtnStyle'}

更新:对不起，我没有看到：

let griddleBtnStyle = {
  background: 'red'
};

我以为griddleBtnStyle是一个类。所以我认为最好的解决方案将在CSS类名称griddleToggleBtn中定义如下：

.griddleToggleBtn {
    background-color: red
}

并传递给属性settingsToggleClassName类名字符串'griddleToggleBtn'：

settingsToggleClassName='griddleBtnStyle'

its应该行得通

Answer 2

忽略settingsToggleClassName。只有当你想将CSS样式应用于Griddle创建的切换按钮时，你才会使用它。但是，你没有使用那个按钮--你在使用settingsIconComponent提供你自己的按钮。所以，如果你想改变你的RaisedButton的外观，只需要设置它的属性和/或样式...例如，要将背景更改为红色：

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