How to declare type for CSS class in typescript?

November 2, 2022

     import React, { FC } from "react";
     import { IUser } from "../types/Types";
     import App from "../App";
     interface UserItemProps {
     user: IUser;
     ClassName: React.CSSProperties;
      }
       const UserItem: FC<UserItemProps> = ({ user }) => {
        return (
         <div ClassName="UserPage">
         {user.id}.{user.name}.{user.email} lives {user.address.city} street{" "}
         {user.address.street}
         </div>
         );
        };

     export default UserItem;

CSS

     .UserPage{
      width:1400px;
      height:hug 164px;
      border-radius:8px;
      padding:24px, 16px, 24px, 16px;
      gap:32px;

      }

Error:
Type ‘{ children: (string | number)[]; ClassName: string; }’ is not assignable to type ‘DetailedHTMLProps<HTMLAttributes, HTMLDivElement>’.
Property ‘ClassName’ does not exist on type ‘DetailedHTMLProps<HTMLAttributes, HTMLDivElement>’. Did you mean ‘className’?

how can i declare css type?

>Solution :

In your div component, you have used className With capital C, you need to write it like className

     <div className="UserPage">
       {user.id}.{user.name}.{user.email} lives {user.address.city} 
         street{""}
       {user.address.street}
     </div>