Typings on PsuedoProps

[ozimos]

I have a component that works fine with this code. The correct hover styles are generated for the wrapped Text component. But typescript complains about the value of the _hover prop to the Link component. The component also works if I replace "& p" with just "p", but Typescript complains because "p" in the PsuedoProps typings is reserved for padding. Is this a misuse of the psuedoprops functionality?

import React from "react";
import { Link, Text, LinkProps } from "@chakra-ui/core";

export default function NavItem({ children, href, ...rest }: LinkProps) {
  return (
    <Link
      href={href}
      _hover={{
        /* @ts-ignore */
        "& p": {
          _after: {
            w: "100%",
          },
        },
      }}
      {...rest}
    >
      <Text
        fontSize="md"
        textTransform="uppercase"
        mx={["10px", "20px"]}
        pos="relative"
        _after={{
          content: '""',
          h: "2px",
          w: 0,
          pos: "absolute",
          bottom: 0,
          left: 0,
          bg: "linear-gradient(to right, #6372ff 0%, #5ca9fb 100%)",
          transition: "width 0.2s",
        }}
      >
        {children}
      </Text>
    </Link>
  );
}

[ozimos]

The correct way to write css styles is by using the sx prop

export default function NavItem({ children, href, ...rest }: LinkProps) {
  return (
    <Link
      href={href}
      sx={{
        "&:hover>p::after": {
          width: "100%",
        },
      }}
      {...rest}
    >
      <Text
        fontSize="md"
        textTransform="uppercase"
        mx={["10px", "20px"]}
        pos="relative"
        _after={{
          content: '""',
          h: "2px",
          w: 0,
          pos: "absolute",
          bottom: 0,
          left: 0,
          bg: "linear-gradient(to right, #6372ff 0%, #5ca9fb 100%)",
          transition: "width 0.2s",
        }}
      >
        {children}
      </Text>
    </Link>
  );
}