我刚开始使用样式化的组件,想为按钮、导航栏等创建变体。
例如,我想创建一个深色版本的导航栏(其中背景颜色会变暗,文本颜色会变浅)。
我想做的只是在组件上添加一个暗属性,如下所示:
<Navbar dark>...</Navbar>
我想这样做,而不是这样:
<Navbar type="dark">...</Navbar>
但是,我不确定如何执行此操作。也就是说,如何仅通过检查道具名称是否存在来设置元素的样式(不向道具传递任何值)?
有任何想法吗?提前致谢。
我刚开始使用样式化的组件,想为按钮、导航栏等创建变体。
例如,我想创建一个深色版本的导航栏(其中背景颜色会变暗,文本颜色会变浅)。
我想做的只是在组件上添加一个暗属性,如下所示:
<Navbar dark>...</Navbar>
我想这样做,而不是这样:
<Navbar type="dark">...</Navbar>
但是,我不确定如何执行此操作。也就是说,如何仅通过检查道具名称是否存在来设置元素的样式(不向道具传递任何值)?
有任何想法吗?提前致谢。
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