[docs] Fix ClassNameGenerator content

[siriwatknp]

closes mui/mui-x#4767

Preview: https://deploy-preview-32800--material-ui.netlify.app/material-ui/experimental-api/classname-generator/

Updated content to always create an initializer file instead of using ClassNameGenerator directly in index.js. This is because of how bundler works (eg. webpack). Webpack hoist all imports which are run before the index.js

// es2015+
import { unstable_ClassNameGenerator as ClassNameGenerator } from "@mui/material/className";

console.log("test");
ClassNameGenerator.configure((name) => name.replace("Mui", "Custom"));

import * as React from "react";
import ReactDOM from "react-dom/client";
import { StyledEngineProvider } from "@mui/material/styles";
import Demo from "./demo";

ReactDOM.createRoot(document.querySelector("#root")).render(
  <StyledEngineProvider injectFirst>
    <Demo />
  </StyledEngineProvider>
);

The console.log("test") runs after Demo, that's why it does not work in mui/mui-x#4767.

• I have followed (at least) the PR section of the contributing guide.

[mui-bot]

No bundle size changes

Generated by 🚫 dangerJS against 3ca3c8f

[alexfauquette]

Thanks for the clarification 👍