[Box] Support generateClassName and defaultClassName (mui#29347)

packages/mui-material/src/Box/Box.js

@@ -1,11 +1,16 @@
 import { createBox } from '@mui/system';
+import { unstable_ClassNameGenerator as ClassNameGenerator } from '../utils';
 import { createTheme } from '../styles';
 
 const defaultTheme = createTheme();
 
 /**
  * @ignore - do not document.
  */
-const Box = createBox({ defaultTheme });
+const Box = createBox({
+  defaultTheme,
+  defaultClassName: 'MuiBox-root',
+  generateClassName: ClassNameGenerator.generate,
+});
 
 export default Box;

packages/mui-material/src/Box/Box.test.js

@@ -3,6 +3,7 @@ import { expect } from 'chai';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
 import { createClientRender, describeConformance } from 'test/utils';
 import Box from '@mui/material/Box';
+import { unstable_ClassNameGenerator as ClassNameGenerator } from '@mui/material/utils';
 
 describe('<Box />', () => {
   const render = createClientRender();
@@ -46,4 +47,21 @@ describe('<Box />', () => {
       color: 'rgb(255, 0, 0)',
     });
   });
+
+  describe('ClassNameGenerator', () => {
+    afterEach(() => {
+      ClassNameGenerator.reset();
+    });
+
+    it('get custom className', () => {
+      const { container, rerender } = render(<Box />);
+      expect(container.firstChild).to.have.class('MuiBox-root');
+
+      ClassNameGenerator.configure((name) => name.replace('Mui', 'Company'));
+
+      rerender(<Box />);
+
+      expect(container.firstChild).to.have.class('CompanyBox-root');
+    });
+  });
 });

packages/mui-system/src/createBox.d.ts

@@ -1,3 +1,7 @@
 import * as React from 'react';
 
-export default function createBox(options?: { defaultTheme: object }): React.ElementType;
+export default function createBox(options?: {
+  defaultTheme: object;
+  defaultClassName?: string;
+  generateClassName?: () => string;
+}): React.ElementType;

packages/mui-system/src/createBox.js

@@ -6,7 +6,7 @@ import styleFunctionSx, { extendSxProp } from './styleFunctionSx';
 import useTheme from './useTheme';
 
 export default function createBox(options = {}) {
-  const { defaultTheme } = options;
+  const { defaultTheme, defaultClassName = 'MuiBox-root', generateClassName } = options;
   const BoxRoot = styled('div')(styleFunctionSx);
 
   const Box = React.forwardRef(function Box(inProps, ref) {
@@ -17,7 +17,10 @@ export default function createBox(options = {}) {
       <BoxRoot
         as={component}
         ref={ref}
-        className={clsx(className, 'MuiBox-root')}
+        className={clsx(
+          className,
+          generateClassName ? generateClassName(defaultClassName) : defaultClassName,
+        )}
         theme={theme}
         {...other}
       />

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

@@ -30,4 +30,28 @@ describe('createBox', () => {
     );
     expect(container.firstChild).toHaveComputedStyle({ color: 'rgb(0, 255, 0)' });
   });
+
+  it('able to customize default className', () => {
+    const Box = createBox({ defaultClassName: 'FooBarBox' });
+
+    const { container } = render(<Box />);
+    expect(container.firstChild).to.have.class('FooBarBox');
+  });
+
+  it('use generateClassName if provided', () => {
+    const Box = createBox({ generateClassName: () => 'CustomBox-root' });
+
+    const { container } = render(<Box />);
+    expect(container.firstChild).to.have.class('CustomBox-root');
+  });
+
+  it('generateClassName should receive defaultClassName if provided', () => {
+    const Box = createBox({
+      defaultClassName: 'FooBarBox',
+      generateClassName: (name) => name.replace('FooBar', ''),
+    });
+
+    const { container } = render(<Box />);
+    expect(container.firstChild).to.have.class('Box');
+  });
 });