CODEWITHSUNDEEP
reactjstypescriptstyled-components
user8530752
user8530752

Reputation:

Typescript styled components

I was trying to use typescript with styled components. I have a div inside which there is a input component.

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

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

But it is throwing this error on the console.

enter image description here

Error Log:

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

Upvotes: 1

Views: 5548

Answers (1)

ford04
ford04

Reputation: 74750

You can only use a component CSS selector like & > ${Input} {...}, when you wrap Input by the styled() factory function. Also make sure to add a className prop for Input and forward it to a DOM element, so styles get applied.

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;
  }
`;

Upvotes: 5

Related Questions