Question

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

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

我想做的就是简单地在组件上添加深色道具，如下所示：

<Navbar dark>...</Navbar>

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

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

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

有什么想法吗？预先感谢。

Answer 1

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

例如，假设您的示例中的<Navbar />是样式化的<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