[system] Fix duplicated styles in Box (mui#33774)

packages/mui-system/src/createBox.js

@@ -11,7 +11,9 @@ export default function createBox(options = {}) {
     generateClassName,
     styleFunctionSx = defaultStyleFunctionSx,
   } = options;
-  const BoxRoot = styled('div')(styleFunctionSx);
+  const BoxRoot = styled('div', {
+    shouldForwardProp: (prop) => prop !== 'theme' && prop !== 'sx' && prop !== 'as',
+  })(styleFunctionSx);
 
   const Box = React.forwardRef(function Box(inProps, ref) {
     const theme = useTheme(defaultTheme);

packages/mui-system/src/createBox.test.js

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
+import { spy } from 'sinon';
 import { createRenderer } from 'test/utils';
 import { createBox, ThemeProvider } from '@mui/system';
 
@@ -54,4 +55,43 @@ describe('createBox', () => {
     const { container } = render(<Box />);
     expect(container.firstChild).to.have.class('Box');
   });
+
+  it('should accept sx prop', () => {
+    const Box = createBox();
+    const { container } = render(<Box sx={{ color: 'rgb(255, 0, 0)' }}>Content</Box>);
+    expect(container.firstChild).toHaveComputedStyle({ color: 'rgb(255, 0, 0)' });
+  });
+
+  it('should call styleFunctionSx once', () => {
+    const Box = createBox();
+    const spySx = spy();
+    render(<Box sx={spySx}>Content</Box>);
+    expect(spySx.callCount).to.equal(2); // React 18 renders twice in strict mode.
+  });
+
+  it('should still call styleFunctionSx once', () => {
+    const Box = createBox();
+    const spySx = spy();
+    render(
+      <Box component={Box} sx={spySx}>
+        Content
+      </Box>,
+    );
+    expect(spySx.callCount).to.equal(2); // React 18 renders twice in strict mode.
+  });
+
+  it('overridable via `component` prop', () => {
+    const Box = createBox();
+
+    const { container } = render(<Box component="span" />);
+    expect(container.firstChild).to.have.tagName('span');
+  });
+
+  it('should not have `as` and `theme` attribute spread to DOM', () => {
+    const Box = createBox();
+
+    const { container } = render(<Box component="span" />);
+    expect(container.firstChild).not.to.have.attribute('as');
+    expect(container.firstChild).not.to.have.attribute('theme');
+  });
 });