React.js Bootstrap Accordion change background color when clicked

Question

My question is how can I change accordion background color when it's active in react bootstrap? Thank you!

class App extends React.Component {
  render() {
    return (
      <div>
         <Accordion>
           <Card>
            <Card.Header>
              <Accordion.Toggle as={Button} variant="link" eventKey="0">
              All movies
              </Accordion.Toggle>
            </Card.Header>
            [....]
      </div>
    );
  }
}

Answer 1

For react-bootstrap 5, just override CSS:

.accordion-button:not(.collapsed) {
    color: #ffffff;
    background-color: #29008a;
    box-shadow: inset 0 -1px 0 rgb(0 0 0 / 13%);
}

Change color, background-color to your choice.

Answer 2

I think what you want is to apply it to the Card.Header since it is configured to occupy the entire width of the accordion. You can leverage eventKey to track the active accordion item which you can store in a state

state = {
  activeEventKey: "0"
};

activeColor = "#dddddd";

<Card.Header
  {...(this.state.activeEventKey === "0" && {
    style: { backgroundColor: this.activeColor }
  })}
>
  <Accordion.Toggle
    as={Button}
    variant="link"
    eventKey="0"
    onClick={() => this.setState({ activeEventKey: "0" })}
  >
    Click me!
  </Accordion.Toggle>
</Card.Header>

Example accordion is taken from: https://react-bootstrap.github.io/components/accordion/

Answer 3

You will have to keep track of which accordion key is open by using useState() hook so you can dynamically set it. After that, you will have to check the current opened key against each card and if it matched the key of the card, you will change the style dynamically by setting backgroundColor. A working example would be:

import React, { useState } from "react";
import "./App.css";

import { Accordion, Card } from "react-bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";

function App() {
  const [currentActiveKey, setCurrentActiveKey] = useState(null);

  const toggleActiveKey = (key) => {
    setCurrentActiveKey(currentActiveKey === key ? null : key);
  };

  return (
    <div className="App">
      <Accordion>
        <Card
          style={currentActiveKey === "0" ? { backgroundColor: "red" } : null}
        >
          <Card.Header>
            <Accordion.Toggle
              onClick={() => {
                toggleActiveKey("0");
              }}
              variant="link"
              eventKey="0"
            >
              All Movies
            </Accordion.Toggle>
          </Card.Header>
          <Accordion.Collapse eventKey="0">
            <div className="panel-body">Body content for panel 1</div>
          </Accordion.Collapse>
        </Card>

        <Card
          style={currentActiveKey === "1" ? { backgroundColor: "red" } : null}
        >
          <Card.Header>
            <Accordion.Toggle
              onClick={() => {
                toggleActiveKey("1");
              }}
              variant="link"
              eventKey="1"
            >
              All Movies 2
            </Accordion.Toggle>
          </Card.Header>
          <Accordion.Collapse eventKey="1">
            <div className="panel-body">Body content for panel 2</div>
          </Accordion.Collapse>
        </Card>
      </Accordion>
    </div>
  );
}

export default App;