How can i Type an attribute passing by Styled-component Element? here is my case. My problem is on locate props at Cursor

Question

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>
  )
}


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

export const Cursor = 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;
`;

Answer 1

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