CODEWITHSUNDEEP
reactjstypescriptnext.js
Nikhil
Nikhil

Reputation: 604

nextjs- typescript- Property 'className' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes

I've created basic nextjs app using typescript link - https://github.com/zeit/next.js/tree/master/examples/with-typescript

I can not add className attribute to any element.I am getting below error. Property 'className' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly & Readonly<{ children?: ReactNode; }>

I am getting type error for other attributes also like rel on link element.

error for Head > link attribute

error 2 type check error

Upvotes: 6

Views: 8601

Answers (2)

Sergei Rudz
Sergei Rudz

Reputation: 1

import React from 'react';
import Link from 'next/link';
import style from './redButton.module.css';

interface Props {
  href: string;
  text?: string;
}

const RedButton: React.FC<Props> = ({ href, text }) => {
  return (
    <Link href={href}>
      <a rel="nofollow" className={style.redButton}>
        {text}
      </a>
    </Link>
  );
};

export default RedButton;

In this case you have to add rel="", className={} to the <a> tag and not the <Link> from 'next/link'

Upvotes: 0

Dmytro
Dmytro

Reputation: 129

See the NextJS docs. The Link isn't a DOM-element, so you need to add className directly to the <a> tag, but not to the <Link>.

The basic example from the docs:

// pages/index.js
import Link from 'next/link'

function Home() {
  return (
    <>
      <ul>
        <li>Home</li>
        <li>
          <Link href="/about">
            <a>About Us</a>
          </Link>
        </li>
      </ul>
    </>
  )
}

export default Home

Upvotes: 4

Related Questions