如何在 Typescript 的 React Modal 中添加带有样式组件的包装器？

Question

我有以下反应模式：

<ReactModal
          isOpen
          onRequestClose={hideModal}
          style={{
            content: {
              ...modalStyleReset(isSmall),
              width: isSmall ? '100%' : 556,
              top: '50%',
              left: '50%',
              transform: 'translate(-50%, -50%)',
              height: isSmall ? '100%' : 'max-content',
            },
          }}
        >

而且我想添加一个样式组件来避免在我的渲染函数中使用所有这些样式，它会是这样的：

const ReactModalStyled = styled.ReactModal`
{
  content: {
    ...modalStyleReset(isSmall),
    width: isSmall ? '100%' : 556,
    top: '50%',
    left: '50%',
    transform: 'translate(-50%, -50%)',
    height: isSmall ? '100%' : 'max-content',
  },
}
`;

<ReactModalStyled
  isOpen
  onRequestClose={hideModal}
>

然而，当我尝试创建此样式组件时出现以下错误：

Property 'ReactModal' does not exist on type 'ThemedBaseStyledInterface'.ts(2339)

Answer 1

你的语法不对，改成：

const ReactModalStyled = styled(ReactModal)`
  // Styles here
`;

styled.name 语法适用于 DOM 元素，例如const Button = styled.button``

如何在 Typescript 的 React Modal 中添加带有样式组件的包装器？

How can I added a wrapper with styled component in React Modal in Typescript?

reactjs

styled-components

react-modal