JSS classes collide with apps JSS, causing styles overrides

[assafchamoy]

Edit 2024: Brought to my attention that this patch will not work for newer versions of Mui anymore, as JSS is no longer used by MUI for styling and the API used here is now officially deprecated.

Hey, we are using chonky for a few months now, via a custom wrapper we created inside our common-components module. We encountered a weird issue with the styling when chonky is rendered. After some debugging using the dev tools we found out that some auto generated JSS classes (generated by MUI) inside chonky's elements, are the same as some elements inside our app, since JSS classes are generated kinda serial-like (jss01, jss02, etc..). Chonky as a third party library, should be isolated from the app's global styles, and be more precise with its styles.

I created a simple patch to fix it for us specifically, you maybe want to implement this differently at higher level or some other places.

const muiJSSClassNameGenerator = createGenerateClassName({
    // Seed property is used for prefix jss classes generated by material ui.
    // Added to prevent style collisions
    seed: 'chonky-generated',
  });

export const FullFileBrowser = React.memo(
    React.forwardRef<FileBrowserHandle, FileBrowserProps>((props, ref) => {
        const { onScroll } = props
        return (
            <StylesProvider generateClassName={muiJSSClassNameGenerator}>
                <FileBrowser ref={ref} {...props}>
                    <FileNavbar />
                    <FileToolbar />
                    <FileList onScroll={onScroll}/>
                    <FileContextMenu/>
                </FileBrowser>
            </StylesProvider>
        );
    })
);

As you can see I Implemented my patch directly in the FullFileBrowser component, since this is what we use for our app. Source for the solution: MUI docs

[wil-se]

patched here

[Egzscure]

no its not patched. 2024 issue still exists.

[assafchamoy]

Hey, sorry to hear that.. that patch fixed it for me a year ago, I'm aware that it's not pretty though.

Now the solution is actually deprecated and should not be used. I'll make sure to update the description.