Issue

This Content is from Stack Overflow. Question asked by Diogo

error message = Nenhuma sobrecarga corresponde a esta chamada
Im trying to pass the mouse point locate
A sobrecarga 1 de 2, ‘(props: { children?: ReactNode; ref?:
((instance: HTMLDivElement | null) => void) |
RefObject | null | undefined; … 253 more …;
onTransitionEndCapture?: TransitionEventHandler<…> | undefined; } &
{ …; } & { …; }): ReactElement<…>’, gerou o seguinte erro.

export default function App() {


const { theme } = useContext(UserThemeContext);

  const [locate, setLocate] = useState({x: 0, y: 0})

  const handleMoveMouse = (event: MouseEvent) => {
    event.preventDefault();
    setLocate({x: event.pageX, y: event.pageY})
  };

  return (
    <ThemeProvider theme={ theme ?  dark : light }>
      
        <div onMouseMove={(e) => handleMoveMouse(e)}>
        <Cursor locate={locate}/>

          <Home/>

          <GlobalStyle/>

        </div>
      
    </ThemeProvider>
  )
}

Solution

I’m very happy. i found a way to fix my problem. I don’t know if is
the best way, but it’s working.
I Type like StyledComponent<"div", any, Props, never> =
styled.div.attrs

interface Props {
  locate: {
    x:number,
    y:number
  }
}

export const Cursor: StyledComponent<"div", any, Props, never> = styled.div.attrs<Props>(props => ({
  style: {
    left: (props.locate.x - 20) + 'px',
    top: (props.locate.y - 20) + 'px',
  },
}))`
  z-index: 9999;
  position: fixed;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  pointer-events: none;
  background: #70aca812;
  box-shadow: 0 0 150px #bdf6ff;
`;

This Question was asked in StackOverflow by Diogo and Answered by Diogo It is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.