如何在 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}
>

但是，當我嘗試創建此樣式組件時出現以下錯誤：

類型“ThemedBaseStyledInterface”.ts(2339) 上不存在屬性“ReactModal”

Answer 1

您的語法不正確，將其更改為：

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

styled.name語法適用於 DOM 元素，例如const Button = styled.button``