在 Typescript 中設置自定義 React 樣式組件的樣式？

Question

我有這個CustomScroll組件。

自定義滾動.tsx

import React from "react";
import styled from "styled-components";

interface Container_DIV {
  className: string
}

const Container_DIV = styled.div<Container_DIV>`
  // SOME CCS PROPERTIES
`;

interface CustomScroll {
  className: string
}

const CustomScroll: React.FC<CustomScroll> = (props) => {
  console.log("Rendering CustomScroll...");

  return(
    <Container_DIV className={props.className}>
      {props.children}
    </Container_DIV>
  );
};

export default React.memo(CustomScroll);

請注意，我正在傳遞className道具以讓styled-components完成它的工作。

當我使用它時，我需要用一些額外的屬性來設計它。

我的組件.tsx

import styled from "styled-components";
import CustomScroll from "./Parts/CustomScroll";

const Filters_DIV = styled(CustomScroll)`
  // SOME CCS PROPERTIES
`;

我收到以下錯誤：

沒有重載匹配這個調用。

重載 1 of 2, '(props: Pick<Pick<CustomScroll, "className"> & Partial<Pick<CustomScroll, never>>, "className"> & { theme?: DefaultTheme | undefined; } & { ...; }): ReactElement<...>'，給出了以下錯誤。

類型'{孩子：元素; }' 與類型 'IntrinsicAttributes & Pick<Pick<CustomScroll, "className"> & Partial<Pick<CustomScroll, never>>, "className"> & { ...; } & { ...; }'。

Overload 2 of 2, '(props: StyledComponentPropsWithAs<NamedExoticComponent, DefaultTheme, {}, never>): ReactElement<...>'，給出了以下錯誤。

類型'{孩子：元素; }' 與類型 'IntrinsicAttributes & Pick<Pick<CustomScroll, "className"> & Partial<Pick<CustomScroll, never>>, "className"> & { ...; } & { ...; }'.ts(2769)

我究竟做錯了什么？

Answer 1

不完全確定出了什么問題，但似乎您需要傳播的不僅僅是className道具。

所以我決定將完整的{...props}對象傳播到CustomScroll組件中。

注意：如果有人能解釋什么是錯的，以及為什么需要完整的props ，我很想知道這一點。

這是現在工作：

自定義滾動.tsx

import React from "react";
import styled from "styled-components";

interface Container_DIV {}  // THIS INTERFACE IS NOT BEING USED

const Container_DIV = styled.div<Container_DIV>`
  // SOME CCS PROPERTIES
`;

interface CustomScroll {}   // THIS INTERFACE IS NOT BEING USED

const CustomScroll: React.FC<CustomScroll> = (props) => {
  console.log("Rendering CustomScroll...");

  return(
    <Container_DIV {...props}>   {/* ALL PROPS ARE BEING SPREADED */}
      {props.children}
    </Container_DIV>
  );
};

export default React.memo(CustomScroll);

我的組件.tsx

import styled from "styled-components";
import CustomScroll from "./Parts/CustomScroll";

const Filters_DIV = styled(CustomScroll)`
  // SOME CCS PROPERTIES
`;