在 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
`;