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

Question

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

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

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

<Navbar dark>...</Navbar>

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

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

但是，我不知道该怎么做。也就是说，如何通过检查 prop 名称是否存在(不传递 prop 任何值)来设置元素的样式？

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

Answer 1

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

例如，假设 <Navbar />在你的例子中是一个样式 <nav>元素，那么我们可以定义<Navbar />以某种方式考虑 dark Prop :

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