react-bootstrap Accordion Body 中的垂直滚动条不可点击

Question

我正在使用 react-bootstrap 手风琴。我的其中一个项目包含一个有时相当长的列表。我在样式中添加了

overflowY: auto

，以便在这些情况下添加滚动条。滚动条确实出现，但不可点击（只能使用鼠标滚轮滚动）。谁能告诉我为什么会这样，以及我需要做什么来解决它？

<div style={{ paddingTop: "1.7rem" }}>
        <table className="columnTable">
            <tbody>
                <tr>
                    {/* Other rows not shown */}
                    <td className="header">Context Information</td>
                </tr>
                <tr>
                    <td>
                        <Accordion defaultActiveKey={open.current} flush alwaysOpen>
                            {someList.filter(a => a.shouldbeIncluded == 'true').map((asset, i) => (
                                <Accordion.Item style={{ cursor: pointer, overflow: 'auto' }} eventKey={i.toString()} key={itemUri} onClick={e => HandleAccordionEvent(e, nameFromElsewhere)}>
                                    <Accordion.Header>{myPropertyName}</Accordion.Header>
                                    <Accordion.Body className="bodyText ellipses" style={{ overflowY: 'auto', maxWidth: 200, maxHeight: 200, textOverflow: 'ellipsis', padding: 10 }}>
                                        {myItemList.filter(a => a.filter == "criteria").map((a, j) => (
                                            <><a href="randomUrl">{a.someRandomText}</a><br/></>
                                        ))}
                                    </Accordion.Body>
                                </Accordion.Item>
                            ))}
                        </Accordion>
                    </td>
                </tr>

                {/* Other rows */}
            </tbody>
        </table>

我为我的组件定义了以下自定义 CSS，但我没有看到其中有任何区别：

.accordion-button.collapsed {
  background-color: rgb(53, 132, 181) !important;
  color: white;
}

.accordion-button {
  font-size: medium;
  padding: 10px;
  background-color: rgb(0, 165, 203) !important;
  color: white !important;
}

.header {
  background-color: rgb(33, 90, 161);
  color: white;
  padding: 10px;
}

.bodyText {
  font-size: 15px;
  text-align: left;
}

.ellipses {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 200px;
}

.columnTable {
  border-width: 1px;
  border-color: lightgray;
  border-style: solid;
  position: 'absolute';
  top: 0;
  width: 200px;
  display: 'inline-block';
  padding-top: "1.7rem"
}

Answer 1

在得到同事的帮助后，问题最终变得完全出乎意料。我在问题中展示的代码完全没问题。真正的问题是我的 React-bootstrap 容器:

<Container>
    <Row style={{ height: 10 }}>
      <Col><Image className="my-company-header-style" /></Col>
    </Row>
    <Row>
      <Col md={1}></Col>
      <Col md={10}>
        <MyComponent/>
      </Col>
      {* This line was the real problem - it was covering the scroll bar *}
      <Col md={1}></Col>
    </Row>
  </Container>

我最初在网格中创建了三列（其中两列是空列，仅用于间距）。在此期间，一些代码更改使得第三列变得不必要；不幸的是，它仍在渲染并覆盖了我的组件的右侧（包括我的滚动条）。