更改 React Bootstrap 中展开的手风琴面板的标题样式

对于单击和活动/展开的面板，我想更改 css 样式。那是因为我想切换面板标题内向上或向下指向的图像箭头。

我能够获取打开面板的 eventKey，但无法使用面板标题CSS 类。

你有什么建议？

Thanks

代码如下

<Accordion onSelect={this.handleSelect} >
  <Panel header="Collapsible Group Item #1" eventKey="1">
    Ad vegan
  </Panel>
  <Panel header="Collapsible Group Item #2" eventKey="2">
    Cliche docet
  </Panel>
</Accordion>

那就变成了

    <div role="tablist" class="panel-group">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 role="presentation" class="panel-title"><a role="tab" aria-expanded="false" aria-selected="false">Collapsible Group Item #1</a></h4></div>
            <div role="tabpanel" class="panel-collapse collapse" aria-hidden="true" style="height: 0px;">
                <div class="panel-body">
                    <!-- react-text: 36 -->Ad vegan
                    <!-- /react-text -->
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 role="presentation" class="panel-title"><a role="tab" aria-expanded="false" aria-selected="false">Collapsible Group Item #2</a></h4></div>
            <div role="tabpanel" class="panel-collapse collapse" aria-hidden="true" style="height: 0px;">
                <div class="panel-body">
                    <!-- react-text: 43 -->Cliche docet
                    <!-- /react-text -->
                </div>
            </div>
        </div>
    </div>

React Bootstrap 面板接受一个节点用作标头（根据：https://github.com/react-bootstrap/react-bootstrap/blob/v0.20.1/src/Panel.js#L144 https://github.com/react-bootstrap/react-bootstrap/blob/v0.20.1/src/Panel.js#L144 and http://react-bootstrap.github.io/components.html#panels-props http://react-bootstrap.github.io/components.html#panels-props），因此您可以将带有适当 onClick 处理程序的内容作为标头传递给它，也许类似于：

<Accordion onSelect={this.handleSelect} >
  <Panel header={<div onClick={() => {console.log('Clicked')}}>"Collapsible Group Item #1"</div} eventKey="1">
    Ad vegan
  </Panel>
  <Panel header="Collapsible Group Item #2" eventKey="2">
    Cliche docet
  </Panel>
</Accordion>