0

由于 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 的设置按钮 - 但是当我以这种方式实现时没有发生任何变化。根据例如这里的按钮应该是红色的，但没有发生。

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

4

2 回答 2

0

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

settingsToggleClassName='griddleBtnStyle'

您转移到属性settingsToggleClassName stringgriddleBtnStyle，而不是griddleBtnStylevalue变量'red'。如果你想要传输变量，它应该像这样（{}）：

settingsToggleClassName={'griddleBtnStyle'}

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

let griddleBtnStyle = {
  background: 'red'
};

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

.griddleToggleBtn {
    background-color: red
}

并转移到属性settingsToggleClassName类名称字符串'griddleToggleBtn'：

settingsToggleClassName='griddleBtnStyle'

它应该工作

于 2016-12-05T10:36:57.190 回答
0

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

      settingsIconComponent={
        <RaisedButton
          backgroundColor="red"
          label='Columns'
          primary={true}
        />}
于 2016-12-05T17:51:11.247 回答