Javascript 为样式化组件使用propTypes和defaultProps

以下样式化组件引发错误：

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: 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)

工作版本

当我注释掉组件的

propTypes

和

defaultProps

时，它能够呈现某种按钮

这要求每个样式化组件都需要一个额外的组件来使用

道具类型

。是否有一种机制或替代API允许我使用样式化组件，而无需将其包装到其他组件中

错误：

style

prop需要从样式属性到值的映射，而不是字符串。例如，当使用JSX时，style={{marginRight:spating+'em'}}。此DOM节点由

styled.button

呈现

它应该是

StyledButton.defaultProps = {
  size: 'md',
  style: { color : 'red'} //e.g.
}

style属性始终是带有

{key:value}

的eexpect对象，其中key是css属性，value是这些键的任何有效css值

e、 g

---

谢谢你的解释，我知道

style

是一个保留的道具，但我没有对我的代码给予足够的关注。为在这样一个琐碎的问题上浪费你的时间而道歉。

StyledButton.defaultProps = {
  size: 'md',
  style: { color : 'red'} //e.g.
}

style : {
  border: '1px solid red',
  font-size: 12px,
}