我是styled-components
第一次玩,我遇到了“react”传递仅由样式组件本身使用的道具的问题。
这是我的组件:
import { Link } from 'react-router-dom';
const CtaButton = styled(Link)`
background: ${props => props.primary ? 'red' : 'yellow'}
color: white;
display: inline-block;
padding: 0.5em 1em;
`;
当我使用primary
道具调用它时,我收到一条警告,react
表明我正在将primary
道具应用于<a />
元素。我明白为什么会发生这种情况 - 但我该如何阻止它呢?
我当然可以围绕react-router
'sLink
组件创建一个包装器来剥离这个道具——但这有点笨拙。我敢肯定,只是我还不是这个库 API 的专业人士——所以有人能指出我正确的方向吗?
styled.a
出于某种原因,当我直接创建 DOM 组件时(例如),我没有这个问题。