Great question—this ties directly to how Reactstrap integrates with Bootstrap's CSS framework, and it's a handy pattern that's easy to overlook if not explicitly covered in tutorials.

What's Going On With the Navbar Component? #

Reactstrap has a built-in behavior where boolean props that align with Bootstrap's class names are automatically converted into CSS classes on the rendered DOM element.

In your case, when you pass <Navbar light expand="md">, the light boolean prop tells Reactstrap to add the navbar-light class to the underlying <nav> element. That’s why your .navbar-light CSS rule works without you manually adding className="navbar-light"—the component handles this mapping behind the scenes to match Bootstrap's naming conventions and reduce boilerplate.

Does This Work for the Card Component's body Prop? #

Yes! The body boolean prop on the Card component follows exactly the same logic. When you use <Card body />, Reactstrap will automatically inject the card-body class into the rendered Card element.

To confirm, add your CSS rule:

.card-body {
  background-color: rgb(211, 81, 81);
}

Then use <Card body> in your code—you’ll see the background color applied as expected, no manual className required.

Why Isn't This Highlighted More Often? #

This is a core design pattern across most Reactstrap components that wrap Bootstrap classes. Once you’re familiar with how the library maps props to Bootstrap’s class system, it becomes intuitive, but it’s totally normal to miss it when you’re starting out. A quick way to verify this behavior for any Reactstrap component is to inspect the rendered DOM with your browser’s dev tools—you’ll see the auto-added classes right there.

内容的提问来源于stack exchange，提问作者HeLin