import React, { FunctionComponent } from "react"
import styled from "styled-components"
interface ChildProps {
color: string
}
const Child = styled.div`
background-color: ${(props: ChildProps) => props.color};
`
interface ParentProps {
node: FunctionComponent<ChildProps> // How to set node type to Styled Component `styled.div`?
}
const Parent = function(props: ParentProps) {
const Node = props.node
return <Node color="white" />
}
npm install -D @types/styled-components
import styled, { StyledComponent } from "styled-components";
interface ParentProps {
node: StyledComponent<"div", any, ChildProps, never>
}
你可以顺便查找某种东西的类型，例如在VSCode中悬停在它上面。
提示：使用泛型来声明样式组件的props，而不是在函数中声明它。在这种情况下，您可以破坏color。
const Child = styled.div<ChildProps>`
background-color: ${({ color }) => color};
`