时间戳

首页 > 解决方案 > 检查样式组件中是否存在 Prop

reactjs - 检查样式组件中是否存在 Prop

问题描述

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

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

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

<Navbar dark>...</Navbar>

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

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

但是，我不确定如何执行此操作。也就是说，如何仅通过检查道具名称是否存在来设置元素的样式（不向道具传递任何值）？

有任何想法吗？提前致谢。

标签： reactjsstyled-componentscss-in-js

解决方案

styled-components 支持将 props 传递给样式化组件，并且可以在接收这些 props 的样式化组件的 CSS 标记模板文字（反引号内的 CSS）中访问这些 props。

例如，假设<Navbar />您的示例中的 the 是一个样式<nav>元素，那么我们可以<Navbar />以一种考虑dark道具的方式定义：

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

在上面的示例中，我们检查dark道具的存在。如果它通过了，那么我们给组件一个black背景颜色。否则（默认），我们给组件一个white背景颜色：

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

推荐阅读