Question

我有这个CustomScroll组件。

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能够完成工作。

当我使用它时，我需要使用一些额外的属性来对其进行样式设置。

MyComponent.tsx

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

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

我收到以下错误：

没有重载匹配此调用。

重载1，共2个，'（道具：Pick ＆Partial >，“ className”>＆{theme ?: DefaultTheme | undefined;}＆{。 ..;}）：ReactElement <...>'，出现以下错误。

类型'{儿童：元素； }'与类型'IntrinsicAttributes和Pick ＆Partial >，“ className”>＆{...; }＆{...; }'。

重载2，共2个，'（props：StyledComponentPropsWithAs ）：ReactElement <...>'，出现以下错误。

类型'{儿童：元素； }'与类型'IntrinsicAttributes和Pick ＆Partial >，“ className”>＆{...; }＆{...; }'。ts（2769）

我在做什么错了？

Answer 1

不能完全确定出了什么问题，但是看来您需要传播的不仅是className道具。

因此，我决定将整个{...props}对象散布到CustomScroll组件中。

注意：：如果有人可以解释什么地方出了问题，为什么需要完整的props，我对此很感兴趣。

现在可以使用了

CustomScroll.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);

MyComponent.tsx

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

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

在Typescript中对自定义的React样式化组件进行样式化？

1 个答案: