PropTypes在React-DND / Styled-Components组合中接收未定义的类型

Question

我正在尝试举一个将react-dnd与styled-components一起使用的小例子，它可以工作！但是，它似乎已经完全破坏了PropTypes。

这对我来说似乎很奇怪。我每个人都有几个工作组件，在介绍react-dnd之前，这个组件已经工作了，所以我至少不敢说。

如前所述，代码可以在浏览器中正常工作，并且console.log对道具及其类型进行显示表明它们确实存在并且具有有效的类型。

这是我的代码：

import React from 'react';
import PropTypes from 'react';
import styled from 'styled-components';

import { DragSource } from 'react-dnd';

class StyleTest extends React.Component {

  constructor(props) {
    super(props);
    console.log(Object.keys(props).map(p => (typeof props[p])));
    // prints ["string", "string", "function"]
  }

  render() {
    const { color, title, connectDragSource } = this.props;

    return (
      <Wrapper color={color}>
        <h1>HUZZAAAAH {title}</h1>
        <Button ref={instance => connectDragSource(instance)}>Make boring</Button>
        <CoolerButton>Make cool</CoolerButton>
      </Wrapper>
    );
  }

}

StyleTest.propTypes = {
  color: PropTypes.string,
  title: PropTypes.string,
  connectDragSource: PropTypes.func
};

export default DragSource(
  'button_drag', 
  {
    beginDrag: () => {
      return {id: 42};
    }
  }, 
  (connect) => ({ 
    connectDragSource: connect.dragSource()
  })
)(StyleTest);

let Wrapper = styled.div`
  height: 200px;
  background-color: peachpuff;

  h1 {
    color: ${props => props.color};
  }
`;

let Button = styled.div`
  width: 200px;

  margin: 5px;
  padding: 5px 10px;

  text-align: center;
  border: 2px solid grey;
`;

let CoolerButton = styled(Button)`
  border-color: orange;
  border-radius: 10px;
`;