[core] Exclude undefined className from render fn props (#1041)

packages/react/src/utils/useComponentRenderer.test.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { expect } from 'chai';
+import { createRenderer } from '@mui/internal-test-utils';
+import { useComponentRenderer, type ComponentRendererSettings } from './useComponentRenderer';
+
+describe('useComponentRenderer', () => {
+  const { render } = createRenderer();
+
+  it('render props does not overwrite className in a render function when unspecified', async () => {
+    function TestComponent(props: {
+      render: ComponentRendererSettings<any, Element>['render'];
+      className?: ComponentRendererSettings<any, Element>['className'];
+    }) {
+      const { render: renderProp, className } = props;
+      const { renderElement } = useComponentRenderer({
+        render: renderProp,
+        state: {},
+        className,
+      });
+      return renderElement();
+    }
+
+    const { container } = await render(
+      <TestComponent
+        render={(props: any, state: any) => <span className="my-span" {...props} {...state} />}
+      />,
+    );
+
+    const element = container.firstElementChild;
+
+    expect(element).to.have.attribute('class', 'my-span');
+  });
+});

packages/react/src/utils/useComponentRenderer.ts

@@ -84,11 +84,13 @@ export function useComponentRenderer<
   }
 
   const renderedElementProps = propGetter(ownProps);
-  const propsWithRef = {
+  const propsWithRef: React.HTMLAttributes<any> & React.RefAttributes<any> = {
     ...renderedElementProps,
     ref: useRenderPropForkRef(resolvedRenderProp, ref as React.Ref<any>, renderedElementProps.ref),
-    className,
   };
+  if (className !== undefined) {
+    propsWithRef.className = className;
+  }
 
   const renderElement = () => evaluateRenderProp(resolvedRenderProp, propsWithRef, state);