如何使手风琴着色？

Question

I成功地使React Bootstrap有色红色的手风琴内部完成了手风琴的内部，但其标头仍然是非红色的。请帮助将标头变成红色（关闭时应该是红色的，打开时浅红色）。

<Accordion defaultActiveKey={undefined}>
    <Accordion.Item eventKey="dangerZone">
        <Accordion.Header
            onClick={() => setShowDanger(!showDanger)}
            className="bg-red-500"
        >{showDanger ? "Hide danger zone" : "Show danger zone"}
        </Accordion.Header>
        <Accordion.Body style={{background: 'red'}}>
            <p><Button disabled={!isAuthenticated} onClick={uninstall}>REMOVE PACKAGE AND ALL ITS DATA</Button></p>
        </Accordion.Body>
    </Accordion.Item>
</Accordion>

Answer 1

<div class="accordion-item">
  <h2 class="bg-red-500 accordion-header">
    <button type="button" aria-expanded="false" class="accordion-button collapsed">
      Show danger zone
    </button>
  </h2>
  <div class="accordion-collapse collapse" style="">
    <div class="accordion-body" style="background: red;">
      <p>
        <button type="button" class="btn btn-primary">REMOVE PACKAGE AND ALL ITS DATA</button>
      </p>
    </div>
  </div>
</div>

它是应用背景色的

<button>

元素。它在倒塌时使用选择器

<h2>

，然后在扩展时使用

.accordion-button

。如果您使您的CSS选择器更具体地应用红色和浅红色背景，它们将覆盖默认值。

由于您已经将类添加到

.accordion-button:not(.collapsed)

元素中，您可以定义以下CSS以覆盖默认值：

bg-red-500

当倒塌时，这将给它一个红色的标头，并在扩展时为浅红色标头。请参阅this thiscodesandbox

进行工作演示