light PropsType如何影响reactstrap中的CSS？

我正在通过Coursera上的课程学习React。在这一部分，导师没有提到我们如何利用下面的特殊机制进行CSS样式设计

在my HeaderComponent.js文件中，导师将数据作为道具传递给Navbar预构建组件，如下所示

...
<Navbar light expand="md">
...
</Navbar>
...

在App.css文件中

.navbar-light {
  background-color: rgb(211, 81, 81);
}

令我惊讶的是，这个CSS选择器可以工作！据我所知，要在JSX中使用类，我们应该在navbar标记中使用classNama=navbar light

我想了解更多关于这一点，我如何利用这一机制？ 例如，如果我有一个卡片组件，我可以在CSS中使用它吗

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

因为身体支柱是bool类型以及以下类型

Card.propTypes = {
  // Pass in a Component to override default element
  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
  inverse: PropTypes.bool,
  color: PropTypes.string,
  body: PropTypes.bool,
  className: PropTypes.string
};

要指定卡的颜色？我在网上找不到任何关于如何利用这种机制的指南。

---

提前感谢。

reactstrap使用一个名为的实用程序，帮助您构建类名列表

例如：

const classes = classnames("class1", "class2");

// `classes` is set to the string "class1 class2"
// Not so useful yet, but read on ...

它还允许您执行布尔检查以决定是否包含类

下面的示例创建一个类名字符串，其中包含类card base和card large（如果large为真）

大的可以作为道具传入。下面是一个工作示例：

从类名中导入类名； const Card={large，className}=>{ 常量类=类名 className，//保留用'className'属性传入的类 卡座， 大牌：大牌， ; 返回…组件的其余部分。。。 } //验证道具： Card.propTypes={ 大型：PropTypes.bool， className:PropTypes.string//用户仍然可以提供自己的类 }; 记住首先安装classnames包：npm安装classnames

---

用于验证组件接收的数据。将propTypes属性添加到包含props及其预期数据类型列表的组件中，如果任何验证失败，JavaScript控制台中将显示警告。道具类型与CSS或类名没有直接关系。这是一种安全机制，不会增加额外的行为。

现在我知道有这个工具，谢谢！但仅供参考，卡组件是reactstrap中的预构建组件。我的问题是，我是否可以假设附加一个小写的预构建组件，比如卡片、按钮、带有-和任何属性键的标签。propsType对象中的body和Reverse将自动设置组件的样式？不确定是否遵循。propTypes仅用于道具验证。它确保组件收到正确的道具，并且道具类型正确。如果你像这样使用，我的答案中的卡片组件会抱怨，因为大的道具应该是布尔值。向propTypes添加属性不会产生任何其他效果；这是一种安全机制，有些人甚至在部署应用程序之前自动将其删除，因为他们认为这只在开发过程中才有必要。请查看reactstrap的卡片组件是如何构建类列表的：如果设置了反向道具，它还会将类文本添加为白色。因此，props和CSS类之间没有一对一的映射。更重要的是，reactstrap如何将类添加到其组件是一个实现细节，可能会发生更改。您应该限制自己使用组件公开的道具，因为这构成了组件的接口。试图绕过这一点是有风险的。

const classes = classnames("class1", "class2");

// `classes` is set to the string "class1 class2"
// Not so useful yet, but read on ...

const classes = classnames(
  "card-base",
  "card-large": large,
);

// If `large` evaluates to `true`, this will result in "card-base card-large"