打字稿样式的组件答案

【问题标题】：Typescript styled components打字稿样式的组件
【发布时间】：2020-06-27 06:12:35
【问题描述】：

我试图使用带有样式组件的打字稿。我有一个 div，里面有一个输入组件。

import styled from 'styled-components';
const Input = () => {
  return (<div>testing</div>);
};

const Main = styled.div`
  display: flex;
  height: 100%;
  & > ${Input} {
    display: none;
  }
`;

但是它在控制台上抛出了这个错误。

错误日志：

No overload matches this call.
  Overload 1 of 3, '(first: TemplateStringsArray | CSSObject | InterpolationFunction<ThemedStyledProps<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "onSelect" | ... 253 more ... | "onTransitionEndCapture"> & { ...; }, any>>, ...rest: Interpolation<...>[]): StyledComponent<...>', gave the following error.
    Argument of type 'typeof Input' is not assignable to parameter of type 'Interpolation<ThemedStyledProps<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "onSelect" | "style" | ... 252 more ... | "onTransitionEndCapture"> & { ...; }, any>>'.
      Type 'typeof Input' is not assignable to type 'InterpolationFunction<ThemedStyledProps<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "onSelect" | "style" | ... 252 more ... | "onTransitionEndCapture"> & { ...; }, any>>'.
        Types of parameters 'props' and 'props' are incompatible.
          Type 'Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "onSelect" | "style" | "title" | ... 251 more ... | "onTransitionEndCapture"> & { ...; } & ThemeProps<...>' is missing the following properties from type 'Props': type, label, value
  Overload 2 of 3, '(first: TemplateStringsArray | CSSObject | InterpolationFunction<ThemedStyledProps<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "onSelect" | ... 253 more ... | "onTransitionEndCapture"> & { ...; } & Props, any>>, ...rest: Interpolation<...>[]): StyledComponent<...>', gave the following error.
    Argument of type 'typeof Input' is not assignable to parameter of type 'Interpolation<ThemedStyledProps<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "onSelect" | "style" | ... 252 more ... | "onTransitionEndCapture"> & { ...; } & Props, any>>'.
      Type 'typeof Input' is not assignable to type 'InterpolationFunction<ThemedStyledProps<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "onSelect" | "style" | ... 252 more ... | "onTransitionEndCapture"> & { ...; } & Props, any>>'.
        Type 'Element' is not assignable to type 'Interpolation<ThemedStyledProps<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "onSelect" | "style" | ... 252 more ... | "onTransitionEndCapture"> & { ...; } & Props, any>>'.
          Type 'Element' is not assignable to type 'CSSObject'.
            Index signature is missing in type 'Element'.  TS2769

    111 |   display: flex;
    112 |   height: 100%;
  > 113 |   > ${Input} {
        |       ^
    114 |     display: none;
    115 |   }
    116 | `;

【问题讨论】：

请将错误分享为文本，而不是图像，因为文本更易于阅读和搜索。话虽如此，styled components typescript api 有什么帮助吗？
通过文档很难找到，所以我发布了。我什至检查了 github 问题，但找不到修复程序。
输入是如何实现的（最小可重现示例）？typescriptlang.org/play?#code/…
@AlekseyL。输入是将包装在中的基本组件
见上面的操场——简单的输入没有错误

标签： reactjs typescript styled-components

【解决方案1】：

当您使用styled() 工厂函数包装Input 时，您只能使用component CSS selector 之类的& > ${Input} {...}。还要确保为 Input 添加一个 className 属性并将其转发到 DOM 元素，以便应用样式。

const Input = ({ className }: { className?: string }) => { // add className prop
  return <div className={className}>testing</div>;
};

const StyledInput = styled(Input)``; // create a wrapper for styled context

const Main = styled.div`
  display: flex;
  height: 100%;
  & > ${StyledInput} { /* works now */
    display: none;
  }
`;

【讨论】：

我试过了，但是 Input 的 className props 是未定义的。不知道是什么原因。
您可以查看此CodeSandbox 以获取示例并与您的版本进行比较。
谢谢。它现在正在工作。代码中有错别字。