I am having some issues with custom styling in react-bootstrap. More specifically, I am having some troubles styling the component. I am trying to center the contents of the Cards vertically.

I've created a custom.scss and linked it properly according to the react-bootstrap introduction page. The custom style loads into my HTML page... but is overriden by _transition.scss overriden style here

I've also tried creating a "cardStyle" object in the component's file and then linking the style to the component with style = "cardStyle" - This seems to work okay... but some styles are still overriden.

I've also tried assigning the card a className, and then styling that className... gets overriden.

.card{
    background-color: aqua;
  }

.customCard{
  background-color: aqua;
}
@import "~bootstrap/scss/bootstrap";

The only thing I was able to make work was adding !important to the styles in custom.scss I feel like this is wrong and sloppy. Can someone explain to me what I am doing wrong?