diff --git a/packages/mui-system/src/createBox.js b/packages/mui-system/src/createBox.js index 364df772760024..a47792ad6df652 100644 --- a/packages/mui-system/src/createBox.js +++ b/packages/mui-system/src/createBox.js @@ -12,8 +12,7 @@ export default function createBox(options = {}) { styleFunctionSx = defaultStyleFunctionSx, } = options; const BoxRoot = styled('div', { - shouldForwardProp: (prop) => - prop !== 'ownerState' && prop !== 'theme' && prop !== 'sx' && prop !== 'as', + shouldForwardProp: (prop) => prop !== 'theme' && prop !== 'sx' && prop !== 'as', })(styleFunctionSx); const Box = React.forwardRef(function Box(inProps, ref) { diff --git a/packages/mui-system/src/createBox.test.js b/packages/mui-system/src/createBox.test.js index f080e275ff17bb..5a875338d62d8f 100644 --- a/packages/mui-system/src/createBox.test.js +++ b/packages/mui-system/src/createBox.test.js @@ -64,19 +64,34 @@ describe('createBox', () => { it('should call styleFunctionSx once', () => { const Box = createBox(); - const sypSx = spy(); - render(Content); - expect(sypSx.callCount).to.equal(2); // React 18 renders twice in strict mode. + const spySx = spy(); + render(Content); + expect(spySx.callCount).to.equal(2); // React 18 renders twice in strict mode. }); it('should still call styleFunctionSx once', () => { const Box = createBox(); - const sypSx = spy(); + const spySx = spy(); render( - + Content , ); - expect(sypSx.callCount).to.equal(2); // React 18 renders twice in strict mode. + expect(spySx.callCount).to.equal(2); // React 18 renders twice in strict mode. + }); + + it('overridable via `component` prop', () => { + const Box = createBox(); + + const { container } = render(); + expect(container.firstChild).to.have.tagName('span'); + }); + + it('should not have `as` and `theme` attribute spread to DOM', () => { + const Box = createBox(); + + const { container } = render(); + expect(container.firstChild).not.to.have.attribute('as'); + expect(container.firstChild).not.to.have.attribute('theme'); }); });