Reactjs 检查样式化组件中是否存在道具

我刚刚开始使用样式化组件，希望为按钮、导航栏等创建变体

例如，我想创建一个导航栏的深色版本（其中背景颜色变暗，文本颜色变亮）

我想做的只是在组件上添加一个暗色道具，如下所示：

<Navbar dark>...</Navbar>

。。。

我想这样做，而不是像这样：

<Navbar type="dark">...</Navbar>

。。。

然而，我不知道该怎么做。也就是说，如何仅通过检查道具名称是否存在（而不向道具传递任何值）来设置元素的样式

---

有什么想法吗？提前感谢。

样式化组件支持将道具传递给样式化组件，并且可以在接收这些道具的样式化组件的CSS标记模板文本（backticks中的CSS）中访问这些道具

例如，假设示例中的

是一个样式化的

元素，那么我们可以通过考虑

暗属性的方式定义
：

const Navbar = styled.nav`
  background: ${props => props.dark ? 'black' : 'white'}
`

在上面的例子中，我们检查
dark
prop是否存在。如果它通过了，那么我们给组件一个
黑色
背景色。否则（默认），我们为组件提供
白色
背景色：

<Navbar dark /> // produces component with black background
<Navbar /> // produces the default white background

//生成具有黑色背景的组件
//生成默认的白色背景