在TypeScript中如何声明CSS类类型？解决组件类型匹配报错

组件代码 #

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:164px; /* 修正原无效语法：移除"hug" */
  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'?

问题 #

在TypeScript中如何正确声明CSS类的类型，以解决上述报错？

解决方案 #

1. 修正JSX属性名 #

React的JSX语法中，对应HTML的class属性的写法是**className（小写开头）**，而非ClassName（大写C）。直接修改组件中的div标签：

<div className="UserPage">

2. 修正Props类型声明 #

你当前把ClassName的类型设为React.CSSProperties是错误的：

• React.CSSProperties是用于声明**行内样式（style属性）**的类型，对应对象格式的样式；
• CSS类名是字符串类型，若需要给组件传递自定义类名，应将类型改为string，同时统一使用小写的className命名（可选属性加?避免不传时报错）：

interface UserItemProps {
  user: IUser;
  className?: string;
}

3. （可选）支持自定义类名传递 #

如果需要父组件给UserItem传递额外CSS类，组件需接收该属性并合并到div的类名中：

const UserItem: FC<UserItemProps> = ({ user, className }) => {
  return (
    <div className={`UserPage ${className || ""}`}>
      {user.id}.{user.name}.{user.email} lives {user.address.city} street{" "}
      {user.address.street}
    </div>
  );
};

内容的提问来源于stack exchange，提问作者Michael Hamar