为什么TypeScript不允许向React Context Provider传递className属性？

TS抛出该错误的核心原因是：你正在给React内置的Context.Provider组件传递它根本不支持的className属性。
其中提到的两个类型可以这么理解：

• IntrinsicAttributes是React内部给所有内置组件、原生元素预设的基础属性集合，key、ref这类通用属性就归在这个类型下。
• ProviderProps<T>是React专门给Context.Provider定义的属性类型，它仅允许传入两个合法属性：value（要全局共享的上下文值）和children（被包裹的子元素），完全没有预留className的位置。
  两个类型交叉合并后（语法中的&代表交叉类型，取两个类型的属性交集），得到的Context.Provider支持的属性列表里确实不存在className，强行传入就会触发类型不匹配的报错。

Context.Provider是React的逻辑容器组件，本身不会渲染任何真实DOM节点到页面上，给它加className没有任何实际作用，就算绕过TS校验，这个类名也不会落到任何DOM元素上。

根据你的实际需求二选一即可：

• 如果你需要给上下文包裹的内容加类名做样式控制：在Context.Provider外层套一个真实DOM元素（比如div），把className加在该DOM元素上即可，参考修改后的代码：

// 优先明确props类型，不要用any获得更好的TS提示
export function OrderContextProvider(props: {
  children: React.ReactNode;
  className?: string;
}) {
  // 建议给cart加明确类型，避免后续调用时报错
  const [cart, setCart] = useState<Record<string | number, CartItem>>({});

  const addItem = (item: CartItem) => {
    // 原逻辑直接写item会覆盖之前的item，建议用item唯一id做key存储
    setCart((prev) => { return { ...prev, [item.id]: item } });
  };

  return (
    <div className={props.className}>
      {/* 原代码value里的addItem写死返回undefined，直接传入定义好的addItem即可正常使用 */}
      <OrderContext.Provider value={{ cart, addItem }} >
        {props.children}
      </OrderContext.Provider>
    </div>
  );
}

• 如果你不需要这个类名，直接删掉两处代码中的className属性即可立刻解决报错。

内容的提问来源于stack exchange，提问作者Connor Mooneyhan