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

Question

I have the following React Modal:

<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',
            },
          }}
        >

And I would like to add a styled component to avoid all these styled in my render function, it would be like this:

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}
>

However I get the following error when I try to created this styled component:

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

Answer 1

Your syntax is incorrect, change it to:

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

styled.name syntax works for DOM elements, e.g. const Button = styled.button``