在 React bootstrap 中更改 Accordion.Header 样式

Question

我开始使用 React Bootstrap，我正在尝试更改手风琴的 background-color 并在我点击它时使用 focus off，但我没有在做了。如何更改手风琴样式？

这是我的代码：

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;

Answer 1

.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

在 React bootstrap 中更改 Accordion.Header 样式

change Accordion.Header style in React bootstrap

css

reactjs

react-bootstrap