The repo stylesheet 'resetting' my parent component's material-ui stylesheet in Nextjs application

[galliumsoft]

Hi,
I went through the codebase and was not able to identify the source of the issue and correct it if needed. I can do the change and send a PR if you can point me in the right direction.
The issue is that I have a component which has a material-ui stylesheet and am exploring the use of chonky for handling the files within it as a subcomponent. The component itself works fine etc. However, the problem is when i come into the chonky part of the component, the stylesheet of the entire parent gets reset to the chonky stylesheet. Is there anyway to avoid these global effects?
I suspect it is to do with the way createusestyles works in the react-jss component that is used in the styles.ts sheet. Any pointers on what can be done here? The issue probably is owing to the way react-jss behaves in nextjs application
cheers

[ArslanMustafin]

@galliumsoft. Hi, Have you found a solution to this problem?
Or maybe you can suggest a similar library alternative.

[aaraney]

@galliumsoft, @ArslanDev666, I've run into this same issue and may have come upon a solution?

In brief, I wrapped my application in a material-ui ThemeProviderwith the default theme and the sibling/parent elements are no longer being styled by styles defined in Chonky. See the below example.

// index.tsx

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { createTheme, ThemeProvider } from "@material-ui/core";

// material-ui default theme
const customTheme = createTheme({});

ReactDOM.render(
  <React.StrictMode>
    <ThemeProvider theme={customTheme}>
      <App />
    </ThemeProvider>
  </React.StrictMode>,
  document.getElementById("root")
);

// App.tsx

import React from "react";
import { AppBar, Container, Toolbar } from "@material-ui/core";
import {
  setChonkyDefaults,
  FileBrowser,
  FileData,
  FileList,
  FileNavbar,
  FileToolbar,
} from "chonky";
import { ChonkyIconFA } from "chonky-icon-fontawesome";

// Somewhere in your `index.ts`:
setChonkyDefaults({ iconComponent: ChonkyIconFA });

const files: FileData[] = [{ id: "1", name: "file" }];

function App() {
  return (
    <Container>
      <AppBar position="static">
        <Toolbar></Toolbar>
      </AppBar>
      <FileBrowser files={files}>
        <FileNavbar />
        <FileToolbar />
        <FileList />
      </FileBrowser>
    </Container>
  );
}

export default App;

I hope this helps!

[andvikt]

@galliumsoft, @ArslanDev666, I've run into this same issue and may have come upon a solution?

In brief, I wrapped my application in a material-ui ThemeProviderwith the default theme and the sibling/parent elements are no longer being styled by styles defined in Chonky. See the below example.

I hope this helps!

does not work

[marisaza]

In my case I have wrapped FileToolbar by ThemeProvider and it helps.

//Chonky v2.3.0
//...
import { ThemeProvider } from "@material-ui/core";

//...
  <FileBrowser
    /* ... */              
  >
    <FileNavbar />
    <ThemeProvider >
      <FileToolbar />
    </ThemeProvider>
    <FileList />
  </FileBrowser>

[marisaza]

Or better

//Chonky v2.3.0
//...
import { ThemeProvider } from "@material-ui/core";

//...
  <ThemeProvider >
    <FileBrowser
   /* ... */   
    >
      <FileNavbar />
      <FileToolbar />
      <FileList />
    </FileBrowser>
  </ThemeProvider>

[TimboKZ]

Thanks for figuring this out!

[weagertron]

Are there any updates on this at all? This fix does not seem to work with Mui v5 and I am struggling to find any other form of workaround

[aaraney]

@weagertron, chony uses @material-ui/core": "4.11.3". I think the best option right now is to use MUI v4.

[MSFTserver]

Im having a similar issue but it seems be overriding my gatsby-plugin-layout theming when they used to work together in chonky 2.0.1 but now my layout tags are broken and ive tried setting chonky and material UI back to old versions that did simehow work together in the past but are failing now.

the second image would be injected as a child

Sent from my SM-G988U using FastHub

[wil-se]

same issue for me, mui5 css seems being overrided by chonky css

[wil-se]

I've found a workaround for React MUI 5
The problem is explained here
So, considering that MUI generates CSS, I taught maybe I could add a prefix to the generated classes, so that they would not clash with the chonky ones.
So I searched on MUI docs and I've found this.
In my case I just had to

import { unstable_ClassNameGenerator as ClassNameGenerator } from '@mui/material/className';
ClassNameGenerator.configure((componentName) => `REPLACE-${componentName}`);
inside src/index.js
maybe you'll need some refactoring but at least it's working

[wil-se]

@TimboKZ a quick fix for this problem woud be adding the same lines to the src/index.js of this project, so that the css generated classes won't clash with others

[Puchaczov]

Hello guys.

None of the above fixes doesn't really worked for me so I decided to do it hard-way and do the update of the packages to support the MUI v5. After quite some time of digging and changing here and there I finally got something that works.

It's here:

https://github.com/Puchaczov/Chonky/tree/update-dependencies

I also tried to bump up the react version hovewer there was too many typing issues (& probably because of breaking changes) so I decided to not upgrading react & other 'react-like' stuff.

I will monitoring if everything is working fine because I'm going to use it with v5 (and in fact my project uses v5, that's why I had to update dependencies a bit)

to use it on your pages:

cd ./chonky/packages/chonky
npm install
npm pack

It will gives you chonky-2.3.2.tgz. This is something because now you can move generated archive to your project and install it!

just put it in your dependencies: [ "chonky": "file:/some/path/to/tgz/file" ] of your package.json

Here is the post in stackoverflow that describe this process better

https://stackoverflow.com/questions/8088795/installing-a-local-module-using-npm

ciao!

[benkhong]

Building on the answers by a few others above and #161

This worked for me. Created a component called ChonkyFullFileBrowser.tsx and imported and used it in place of FullFileBrowser

// ChonkyFullFileBrowser.tsx
import { forwardRef, memo } from 'react';
import {
  StylesProvider,
  createGenerateClassName
} from '@material-ui/core/styles';

import {
  FileBrowser,
  FileList,
  FileContextMenu,
  FileNavbar,
  FileToolbar,
  setChonkyDefaults,
  FileBrowserHandle,
  FileBrowserProps
} from 'chonky';

import { ChonkyIconFA } from 'chonky-icon-fontawesome';

setChonkyDefaults({ iconComponent: ChonkyIconFA });

const muiJSSClassNameGenerator = createGenerateClassName({
  // Seed property is used to add a prefix classes generated by material ui.
  seed: 'chonky'
});

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

[Egzscure]

Still not fixed.

All the "solutions" require using outdated "mui" or using "dubious" hack ways.

[aaraney]

@Egzscure, it appears that the maintainer has more or less abandoned the project. You may have a go with this fork: https://github.com/aperturerobotics/react-chonky. Ive not tried it myself, but it appears to be under active maintenance. Best of luck!