如何为React Bootstrap手风琴设置表头颜色（关红/开浅红）

问题核心是React Bootstrap的Accordion.Header内部默认渲染了.accordion-button元素，它的默认样式会覆盖你添加的背景色类。要实现关闭时红色、展开时浅红色的效果，可通过以下两种方式处理：

方法1：结合状态动态切换类（适配Tailwind） #

直接根据showDanger状态给Header设置不同背景色，用!important强制覆盖默认按钮样式：

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

方法2：自定义CSS选择器（更优雅） #

通过CSS选择器精准匹配手风琴按钮的展开/关闭状态，避免!important滥用：

/* 在全局CSS文件中添加 */
.danger-accordion .accordion-button {
    background-color: #ef4444; /* red-500对应十六进制值 */
    color: white;
    border: none;
}

.danger-accordion .accordion-button:not(.collapsed) {
    background-color: #fecaca; /* red-200对应十六进制值 */
    color: #7f1d1d; /* 深色文字适配浅背景 */
}

/* 移除默认聚焦阴影 */
.danger-accordion .accordion-button:focus {
    box-shadow: none;
}

修改组件代码，给Accordion.Header添加自定义类：

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

两种方法都能实现需求，方法2更符合CSS最佳实践，推荐使用。

内容的提问来源于stack exchange，提问作者porton