轻型PropsType如何影响reactstrap中的CSS？

Question

我正在通过Coursera的课程学习React。这是导师没有提到的部分，我们如何使用以下“特殊”机制进行CSS样式设置。

在我的HeaderComponent.js文件中，辅导员将数据作为道具传递给Navbar预先构建的组件，如下所示。

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

下面是Navbar属性（Link）的文档

Navbar.propTypes = {
  light: PropTypes.bool,
  dark: PropTypes.bool,
  fixed: PropTypes.string,
  color: PropTypes.string,
  role: PropTypes.string,
  expand: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string])
  // pass in custom element to use
}

在App.css文件中

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

令我惊讶的是，这个CSS选择器有效！据我所知，要在JSX中使用类，我们应该在classNama="navbar-light"标记中使用Navbar。

我想了解更多有关此的知识，如何利用这种机制？例如，如果我有一个Card reactstrap组件，我可以在CSS中使用<Card body>然后>

.card-body{
  background-color: rgb(211, 81, 81);
}
因为body道具是布尔型以及下面的类型

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
};
指定卡片的颜色？我在网上找不到任何有关如何使用此机制的指南。预先感谢。

我正在通过Coursera的课程学习React。在这部分中，辅导老师没有提到我们如何利用以下“特殊”机制进行CSS样式设置。在我的HeaderComponent.js文件中，...

Answer 1

reactstrap使用名为classnames的实用程序，可帮助您构造类名列表。