打字稿样式的组件

Question

我试图将带样式组件的打字稿使用。我有一个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 | `;

Answer 1

通过& > ${Input} {...}工厂函数包装Input时，只能使用styled()之类的component CSS selector。另外，请确保为className添加一个Input道具，并将其转发到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;
  }
`;