react bootstrap accordion加上减号指示器问题

import React from 'react';
import { Accordion } from 'react-bootstrap';
import './CustomAccordion.css'; // 导入自定义CSS样式

const CustomAccordion = () => {
  return (
    <Accordion className="custom-accordion">
      {/* Accordion的内容 */}
    </Accordion>
  );
};

export default CustomAccordion;

.custom-accordion .accordion-button::before {
  content: '-';
  display: inline-block;
  margin-right: 0.5rem;
  transform: rotate(0deg);
  transition: transform 0.3s ease-in-out;
}

.custom-accordion .accordion-button[aria-expanded="true"]::before {
  transform: rotate(-180deg);
}

import React from 'react';
import CustomAccordion from './CustomAccordion';

const App = () => {
  return (
    <div>
      {/* 其他组件 */}
      <CustomAccordion />
      {/* 其他组件 */}
    </div>
  );
};

export default App;