change Accordion.Header style in React bootstrap

Issue

I started using react Bootstrap and I'm trying to change the background-color of my accordion and also take the focus off when I click on it, but I'm not getting it. How can I change accordion style?

Here is my code:

import { Accordion} from 'react-bootstrap';
import './App.css';

function App() {
  return (
    <>
      <Accordion>
        <Accordion.Item eventKey="0">
        <Accordion.Header style={{ backgroundColor: '#343a40' }}>Accordion Item #1</Accordion.Header>
        <Accordion.Body>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
           tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
           veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
           commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
           velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
           cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
           est laborum.
        </Accordion.Body>
        </Accordion.Item>
      </Accordion>
    </>
  );
}

export default App;

Solution

.accordion-button {
  background-color: gray !important;
}

.accordion-button:focus {
  box-shadow: none;
}

.accordion-button:not(.collapsed) {
  color: #212529;
}

https://codesandbox.io/s/optimistic-lalande-ojusme

Answered By - Igor Gonak