-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 ofprops.theme.breakpoints.sm
is not ?– Gabriel José de Oliveira