Reactjs 如何申报；propTypes"；对于样式化组件？

我正在开发一个react库，比如说

MyLib

，所以我想为我的lib消费者提供

propTypes

。但是，在typescript和样式化组件的组合中，这会导致以下错误：

Property 'propTypes' does not exist on type 'StyledComponent<"div", any, ScrollerProp, never>'.ts(2339)

MyLib.tsx

从“道具类型”导入道具类型
从“样式化组件”导入样式化
常量滚动条：any=styled.div`
溢出-x：自动；
溢出y：可见；
最大宽度：100%；
浮动：左；
宽度：自动；
${（{maxHeight}）=>maxHeight&&css`
最大高度：${maxHeight}px；
`}
`
Scroller.propTypes={
maxHeight:PropTypes.number，
}

我会这样做

import PropTypes from 'prop-types'
import styled from 'styled-components'

const ScrollerStyle: any = styled.div<ScrollerProp>`
  overflow-x: auto;
  overflow-y: visible;
  max-width: 100%;
  float: left;
  width: auto;
  ${({ maxHeight }) => maxHeight && css`
    max-height: ${maxHeight}px;
  `}
`;

const Scroller = (props: any) => <ScrollerStyle {...props} />;

Scroller.propTypes = {
  maxHeight: PropTypes.number,
};

从“道具类型”导入道具类型
从“样式化组件”导入样式化
const ScrollerStyle:any=styled.div`
溢出-x：自动；
溢出y：可见；
最大宽度：100%；
浮动：左；
宽度：自动；
${（{maxHeight}）=>maxHeight&&css`
最大高度：${maxHeight}px；
`}
`;
常量滚动器=（道具：任意）=>；
Scroller.propTypes={
maxHeight:PropTypes.number，
};

---

注意：我几乎不知道TS，所以我不确定“道具”部分是否正确，但你可以理解要点。

如果不是相同的问题，我也有类似的问题。对我起作用的是：

import styled from 'styled-components'

const Scroller: any = styled.div<{maxHeight: number}>`
  overflow-x: auto;
  overflow-y: visible;
  max-width: 100%;
  float: left;
  width: auto;
  ${({ maxHeight }) => maxHeight && css`
    max-height: ${maxHeight}px;
  `}
`

从“样式化组件”导入样式化
常量滚动条：any=styled.div`
溢出-x：自动；
溢出y：可见；
最大宽度：100%；
浮动：左；
宽度：自动；
${（{maxHeight}）=>maxHeight&&css`
最大高度：${maxHeight}px；
`}
`

---

使用外部定义的“我的类型”不起作用，但直接使用它就起作用了。根据

您可以将要扩展的其他类型传递到

styled

函数：

const Scroller=styled

TS，表示您的Scroller对象中不存在属性PropTypes。您不需要使用

Scroller.PropTypes

@ufollettu，但我需要

PropTypes

让那些非typescript用户验证proptypes@RobertCooper这不起作用

import PropTypes from 'prop-types'
import styled from 'styled-components'

const ScrollerStyle: any = styled.div<ScrollerProp>`
  overflow-x: auto;
  overflow-y: visible;
  max-width: 100%;
  float: left;
  width: auto;
  ${({ maxHeight }) => maxHeight && css`
    max-height: ${maxHeight}px;
  `}
`;

const Scroller = (props: any) => <ScrollerStyle {...props} />;

Scroller.propTypes = {
  maxHeight: PropTypes.number,
};

import styled from 'styled-components'

const Scroller: any = styled.div<{maxHeight: number}>`
  overflow-x: auto;
  overflow-y: visible;
  max-width: 100%;
  float: left;
  width: auto;
  ${({ maxHeight }) => maxHeight && css`
    max-height: ${maxHeight}px;
  `}
`