Customize card background with react-bootstrap

Question

I am trying to customize the bg prop of react-bootstrap/cards, i.e to use something other than the default primary, secondary, danger, etc variants. According to the documentation something like this can be done by providing a custom props with the 'card-' bsprefix, but I can't seem to get it to work.

My current code is something like this:

    <Card bg="light-blue">
       <Card.Body >
          <Card.Text >
            foobar
           </Card.Text>
        </Card.Body>
    </Card>

And from a .css file I have defined the following style

.card-light-blue {
  background-color: rgb(147, 182, 248);
}

What should be changed so that it works?

Answer 1

Try giving the card a className and using the class to give it a background color. If that alone doesn’t work try adding !important

<Card className=“customCard”></Card>

.customCard: {
    background: blue !important;
}

In your example you didn’t give the card a class of light-blue, you tried to assign it a background.