最近在使用 React 做项目的时候，发现了个问题，就是使用之前 React+ts 搭建好的框架来开发项目，在给自定义组件添加 className 或者设置 style 的时候会 ts 类型错误。虽说是自己封装的组件，直接在组件里改下就行了，但是确实不太智能，因为在使用组件的时候你不知道会遇到什么奇葩需求，因此给组件重新设置 className 或者设置内联样式是非常常见的需求，特别是你封装的组件别人可能也会用到，然而你没法预料到别人的需求。

因此，在使用组件的时候，可以自定义 className 或者设置内联 style 是很有必要的。这就要求我们在封装组件的时候，需要采取合并样式和类名的方式来解决问题，即在组件中定义 className 和 style 属性，并使用 TypeScript 的 React.HTMLAttributes 类型来接受用户传入的这些属性，手动拼接 className，并使用对象扩展语法来合并 style。

import React from "react";

interface MyComponentProps extends React.HTMLAttributes<HTMLDivElement> {
  // 自定义属性
  customProp?: string;
  className?: string;
  style?: React.CSSProperties
}

const MyComponent: React.FC<MyComponentProps> = ({ customProp, className, style, ...rest }) => {
  // 定义组件内部的 className 和 style
  const defaultClassName = "default-class";
  const defaultStyle: React.CSSProperties = {
    backgroundColor: "lightblue",
    padding: "10px",
  };

  // 合并用户传入的 className 和 style
  const combinedClassName = `${defaultClassName} ${className || ""}`.trim();
  const combinedStyle = { ...defaultStyle, ...style };

  return (
    <div className={combinedClassName} style={combinedStyle} {...rest}>
      <p>组件: {customProp}</p>
    </div>
  );
};

export default MyComponent;

这样，我们在使用组件的时候就可以设置任意 className 和 style 了，他们会与组件原本的样式进行合并。