onScroll with Styled-Components + Typescript

Asked

Viewed 12 times

-1

I have a problem to use onScroll event with Styled-Components + typescritp. It happens to the following error message:

'No overload matches this call.
  Overload 1 of 2, '(props: Omit<Omit<Pick<DetailedHTMLProps<HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "key" | keyof HTMLAttributes<...>> & { ...; } & CarouselContainerProps, never> & Partial<...>, "theme"> & { ...; } & { ...; }): ReactElement<...>', gave the following error.
    Type 'void' is not assignable to type 'UIEventHandler<HTMLUListElement>'.
  Overload 2 of 2, '(props: StyledComponentPropsWithAs<"ul", any, CarouselContainerProps, never, "ul", "ul">): ReactElement<StyledComponentPropsWithAs<"ul", any, CarouselContainerProps, never, "ul", "ul">, string | JSXElementConstructor<...>>', gave the following error.
    Type 'void' is not assignable to type 'UIEventHandler<HTMLUListElement>'.ts(2769)'

I tried to use interface this way for my component:

interface CarouselContainerProps extends React.HTMLAttributes<HTMLUListElement>.

My component is that way:

export const CarouselContainer = styled.ul<CarouselContainerProps>`
  max-width: 1040px;
  background: #0F1624;
  padding: 0rem;
  list-style:none;
  display: flex;
  justify-content: space-between; 
  /* overflow-x: hidden; */

  margin-left: 32px;
  &:first-of-type{
    margin-left: 0px;
  }

  margin-bottom: 80px;

  //remove scrollbar
  scrollbar-width: none;  
   &::-webkit-scrollbar {
     display: none;
   }

  @media ${props => props.theme.breakpoints.sm} {
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    touch-action: pan-x;
    justify-content: initial;
    margin-bottom: 8px;
  }
`

Can you help me?

  • Please clarify your specific problem or provide Additional Details to Highlight Exactly what you need. As it’s Currently Written, it’s hard to Tell Exactly what you’re asking.

  • I believe that this is not necessary styled.ul<CarouselContainerProps> You’re trying to typify the content of props.theme.breakpoints.sm is not ?

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.