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

Question

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

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

我想做的是简单地在组件上添加一个 dark 道具，如下所示：

<Navbar dark>...</Navbar>

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

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

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

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

Answer 1

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

例如，假设您示例中的 <Navbar /> 是样式化的 <nav> 元素，那么我们可以以考虑 [=15= 的方式定义 <Navbar /> ] 道具：

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

Check If Prop Exists in Styled Components