[英]Using propTypes and defaultProps for a styled-component
The following styled-component throws an error: 以下样式组件引发错误:
const StyledButton = styled.button`
font-weight: 400;
vertical-align: middle;
text-align: center;
text-decoration: none;
white-space: nowrap;
margin-right: 0.2rem;
outline: 0;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-appearance: none;
`
const { oneOf, bool } = PropTypes
// button has no md size
StyledButton.propTypes = {
/** enable block styling on the button */
block: bool,
/** size variant for the button */
size: oneOf(['lg', 'sm', 'md']),
/** style variant for the button */
style: oneOf(['primary', 'grey', 'darkgrey', 'link', 'danger'])
}
StyledButton.defaultProps = {
size: 'md',
style: 'primary'
}
ERROR 错误
Error: The `style` prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + 'em'}} when using JSX. This DOM node was rendered by `styled.button`.
at invariant (invariant.js?7313:44)
at assertValidProps (ReactDOMComponent.js?922a:152)
at ReactDOMComponent.mountComponent (ReactDOMComponent.js?922a:452)
at Object.mountComponent (ReactReconciler.js?c56c:45)
at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js?063f:370)
at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js?063f:257)
at Object.mountComponent (ReactReconciler.js?c56c:45)
at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js?063f:370)
at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js?063f:257)
at Object.mountComponent (ReactReconciler.js?c56c:45)
WORKING VERSION 工作版
It was able to render a button of some sort when I commented out the propTypes
and defaultProps
for the component. 当我注释掉组件的
propTypes
和defaultProps
时,它能够呈现某种按钮。
https://www.webpackbin.com/bins/-KsrPX89Zi6MnRw9X11E https://www.webpackbin.com/bins/-KsrPX89Zi6MnRw9X11E
This requires that every styled component need an additional component to use take advantage of prop-types
. 这要求每个样式化的组件都需要使用额外的组件来利用
prop-types
。 Is there a mechanism or an alternative API that allows me to work with styled-components without wrapping it in an additional component. 是否有机制或替代API允许我使用样式组件而不将其包装在其他组件中。
Error: The
style
prop expects a mapping from style properties to values, not a string.错误:
style
prop期望从样式属性到值的映射,而不是字符串。 For example, style={{marginRight: spacing + 'em'}} when using JSX.例如,使用JSX时style = {{marginRight:spacing +'em'}}。 This DOM node was rendered by
styled.button
.这个DOM节点由
styled.button
呈现。
StyledButton.defaultProps = {
size: 'md',
style: 'primary' //is the wrong way.
}
Its should be 它应该是
StyledButton.defaultProps = {
size: 'md',
style: { color : 'red'} //e.g.
}
style property always eexpect object with {key : value}
where key is the css property and value is the any valid css values for those keys style属性总是eexpect对象
{key : value}
其中key是css属性,value是这些键的任何有效css值
eg 例如
style : {
border: '1px solid red',
font-size: 12px,
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.