最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

bootstrap 5 - How to make an accordion colored? - Stack Overflow

programmeradmin4浏览0评论

I successfully made the inside of an accordion in React Bootstrap colored red, but its header remains non-red. Please, help to make the header red, too (it should be red when closed and light-red when open).

<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>

I successfully made the inside of an accordion in React Bootstrap colored red, but its header remains non-red. Please, help to make the header red, too (it should be red when closed and light-red when open).

<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>
Share Improve this question edited Jan 18 at 16:20 porton asked Jan 18 at 14:30 portonporton 5,82711 gold badges52 silver badges115 bronze badges
Add a comment  | 

1 Answer 1

Reset to default 1

This is how the DOM looks for the accordion header when rendered in a browser:

<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>

It's the <button> element within the <h2> that gets the background-colour applied. It uses the selector .accordion-button when collapsed and .accordion-button:not(.collapsed) when expanded. If you make you CSS selectors to apply the red and light red background more specific they will override the defaults.

As you have already added the class bg-red-500 to the <Accordion.Header> element, you can define the following CSS to override the defaults:

.bg-red-500 .accordion-button:not(.collapsed) {
  background-color: rgb(255, 186, 186);
}

.bg-red-500 .accordion-button.collapsed {
  background-color: rgb(255, 0, 0);
}

This will give it a red header when collapsed, and a light red header when expanded. Please see this CodeSandbox for a working demo

发布评论

评论列表(0)

  1. 暂无评论