Material-UI / MUI ClassName generator

[Codex-]

Because of how storybook builds bundle the contents, the import order in preview doesn't appear to be respected which causes customisations to MUIs classname generation to not correctly apply in the correct order.

https://mui.com/material-ui/experimental-api/classname-generator/

MuiClassNameSetup

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

// https://mui.com/material-ui/experimental-api/classname-generator/
ClassNameGenerator.configure((componentName) => `Scl-Sb-${componentName}`);

preview:

import "./MuiClassNameSetup";

import ScopedCssBaseline from "@mui/material/ScopedCssBaseline";
import { StyledEngineProvider, ThemeProvider } from "@mui/material/styles";
import type { StoryFn } from "@storybook/react";
import React from "react";

import { theme } from "../src/theme/theme";

export const decorators = [
  (Story: StoryFn) => (
    <StyledEngineProvider injectFirst>
      <ThemeProvider theme={theme}>
        <ScopedCssBaseline>
          <Story />
        </ScopedCssBaseline>
      </ThemeProvider>
    </StyledEngineProvider>
  ),
];

During serving via running storybook:

import {jsxDEV} from "/@id/__x00__react/jsx-dev-runtime";
import "/.storybook/MuiClassNameSetup.ts";
import ScopedCssBaseline from "/node_modules/.cache/sb-vite/deps/@mui_material_ScopedCssBaseline.js?v=31a2618d";
import {StyledEngineProvider, ThemeProvider} from "/node_modules/.cache/sb-vite/deps/@mui_material_styles.js?v=31a2618d";
import {theme} from "/src/theme/theme.ts";
export const decorators = [(Story)=>/* @__PURE__ */
jsxDEV(StyledEngineProvider, {
    injectFirst: true,
    children: /* @__PURE__ */
    jsxDEV(ThemeProvider, {
        theme,
        children: /* @__PURE__ */
        jsxDEV(ScopedCssBaseline, {
            children: /* @__PURE__ */
            jsxDEV(Story, {}, void 0, false, {
                fileName: "/Users/alexmiller/dev/shared/shared-components/.storybook/preview.tsx",
                lineNumber: 10,
                columnNumber: 11
            }, this)
        }, void 0, false, {
            fileName: "/Users/alexmiller/dev/shared/shared-components/.storybook/preview.tsx",
            lineNumber: 9,
            columnNumber: 9
        }, this)
    }, void 0, false, {
        fileName: "/Users/alexmiller/dev/shared/shared-components/.storybook/preview.tsx",
        lineNumber: 8,
        columnNumber: 7
    }, this)
}, void 0, false, {
    fileName: "/Users/alexmiller/dev/shared/shared-components/.storybook/preview.tsx",
    lineNumber: 7,
    columnNumber: 48
}, this)];

And the generator:

import {unstable_ClassNameGenerator as ClassNameGenerator} from "/node_modules/.cache/sb-vite/deps/@mui_material_className.js?v=31a2618d";
ClassNameGenerator.configure((componentName)=>`Scl-Sb-${componentName}`);

However, when performing a build and inspecting the bundling sources:

import { a as jsx, C as CacheProvider, b as createCache, T as ThemeContext$2 } from "./emotion-styled.browser.esm-add62706.js";
import { F as useTheme$1, _ as _objectWithoutPropertiesLoose, T as THEME_ID, C as ClassNameGenerator, h as generateUtilityClass, j as generateUtilityClasses, s as styled, e as useThemeProps, f as clsx, g as composeClasses } from "./clsx-c6271da8.js";
import { t as theme } from "./theme-ea0eac87.js";
import { r as reactExports } from "./index-ea8663ca.js";
import { _ as _extends } from "./emotion-use-insertion-effect-with-fallbacks.browser.esm-a5d9fe3b.js";
import "./palette-4a68a1f8.js";
...snip
// line 105, after a tonne of other theming items being defined which should be _after_ this classname config
ClassNameGenerator.configure((componentName) => `Scl-Sb-${componentName}`);
... snip

So, how are we meant to preserve the import order for this crucial import in preview? How should this feature be used correctly with storybook?

[IanVS]

@Codex- could you perhaps share a minimal reproduction for this issue?

[Codex-]

Sure can, will get something up today

[Codex-]

Reproduction here:
https://github.com/Codex-/storybook-mui-classname-generator-issue

Let me know if you have any questions or something is missing / is unclear