Nextjs with Typescript and Styled-Components not working

Question

I’m trying to use the Styled-Components in my Nextjs application, but always returns an error, do not understand why it is not working.

to start the project I used the command:

   npx create-next-app --example with-typescript-styled-components client

my code:

import React, { useState } from 'react';
import Link from 'next/link';
import styled from 'styled-components'

const joinOuterContainer = styled.div`
    display: flex;
    justify-content: center;
    text-align: center;
    height: 100vh;
    align-items: center;
    background-color: #1A1A1D;
`

export default function SignIn() {
  const [name, setName] = useState('');
  const [room, setRoom] = useState('');
  
  return(
    <joinOuterContainer>
      <div className="joinInnerContainer">
        <h1 className="heading">Join</h1>
        <div>
          <input placeholder="Name" className="joinInput" type="text" onChange={(event) => setName(event.target.value)} />
        </div>
        <div>
          <input placeholder="Room" className="joinInput mt-20" type="text" onChange={(event) => setRoom(event.target.value)} />
        </div>
        <Link href={`/ chat? name = $ { name } & room = $ { room } `}>
          <button
            className={'button mt-20'}
            type="submit"
            onClick={(e: any) => (!name || !room ? e.preventDefault() : null)}
            >
            Sign In
          </button>
        </Link>
      </div>
    </joinOuterContainer>
  );
}

Erro: StyledComponent<"div", any, {}, never>
Property 'joinOuterContainer' does not exist on type 'JSX.IntrinsicElements'.ts(2339)

he says the error is in the tag <joinOuterContainer></joinOuterContainer> and the declaration by joinOuterContainer (lines 5,19 and 38 respectively)

Answer 1

You must use the naming convention PascalCase to name "own" components (created by you, the programmer).

When this convention is not properly followed, the Typescript compiler understands that you are referring to a tag HTML, which is obviously not the case. As a tag HTML joinOuterContainer does not exist, an error is raised.

When the convention is used PascalCase, the compiler searches for the component in the scope of running code.

Therefore, change the name of your joinOuterContainer for JoinOuterContainer.