CODEWITHSUNDEEP
javascripthtmlcssreactjs
Akhil Suseelan
Akhil Suseelan

Reputation: 217

How to add Custom Styles for react-bootstrap Components?

I'm using react-bootstrap in my project. In the below code I'm trying to add background-color to card.

=> js file

import React from "react";
import "../assets/css/material-dashboard.css";
import { Accordion, Button, Card } from "react-bootstrap";
import { Header, Container } from "semantic-ui-react";
import TabContent from "./TabContent";
import SubmitButton from "./SubmitButton";
import "../../src/assets/css/collapse.css";

const AddMock = () => {
  return (
    <div class="row">
      <Accordion style={{ paddingLeft: "32px" }}>
        <Card className="collapseStyle">
          <Card.Header>
            <Accordion.Toggle as={Button} variant="link" eventKey="0">
              Options
            </Accordion.Toggle>
          </Card.Header>
          <Accordion.Collapse eventKey="0">
            <Card.Body>
              <Container>
                <Header as="h3">Hierarchy</Header>
                <TabContent />
                <SubmitButton />
              </Container>
            </Card.Body>
          </Accordion.Collapse>
        </Card>
      </Accordion>
    </div>
  );
};

export default AddMock;

This is the style I'm referring to,

=> collapse.css

.card .card-header .collapseStyle {
  background-color: cornflowerblue;
}

It seems like the card is not actually using the custom CSS I have assigned to it. May I know the best practice to add custom style to react-bootstrap components?

Upvotes: 0

Views: 2439

Answers (1)

StackedQ
StackedQ

Reputation: 4139

You've added the className to the card, so the CSS selector will be:

.card.collapseStyle .card-header  {
  background-color: cornflowerblue;
}

Upvotes: 1

Related Questions