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');
});
});