Css 在Typescript中设置自定义样式化组件的样式？

我有这个

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

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

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

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

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

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

我得到了以下错误：

没有与此调用匹配的重载

重载2中的第1个，'（props:Pick&{theme？：DefaultTheme | undefined；}&{…；}）：ReactElement'给出了以下错误

类型“{children:Element；}”与类型“IntrinsicatAttributes&Pick&{…；}&{…；}”没有共同的属性

重载2/2'（props:StyledComponentPropsWithAs）：ReactElement'产生以下错误

类型“{children:Element；}”与类型“IntrinsicattAttributes&Pick&{…；}&{…；}”没有共同的属性。ts（2769）

---

我做错了什么？

不完全确定是什么错了，但似乎你需要传播的不仅仅是

类名

道具

因此，我决定将完整的

{…props}

对象扩展到

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

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

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

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

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

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