Search code examples
react-bootstrap

How to remove the border in react- bootsrap accordion on the text

image here

<Accordion>
          <Accordion.Item eventKey="0">
            <Card style={{ margin: 10 }}>
              <Card.Header style={{ display: "flex" }}>
                <span
                  style={{
                    flex: 1,
                    fontSize: 18,
                    color: "black",
                    textDecoration: "none",
                    cursor: "pointer",
                    alignSelf: "center",
                  }}
                >
                  <Accordion.Header >{note.title}</Accordion.Header>
                </span>

The border on the text came when I applied accordion before it was not there

Solution

  • I tested this CSS, and it works:

    .accordion .card-header button {
    border: none;
}