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

Question

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

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

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

<Navbar dark>...</Navbar>

我想这样做而不是这样：

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

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

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

Answer 1

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

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

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