Компоненты в стиле Typescript

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

Вы можете использовать компонент CSS селектор , как & > ${Input} {...}, когда вы оборачиваете Input с помощью заводской функции styled(). Также обязательно добавьте className prop для 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;
  }
`;