direflow icon indicating copy to clipboard operation
direflow copied to clipboard

Material UI 5 is out now, and direflow doesn't support it's styling yet

Open rocknatt opened this issue 4 years ago • 4 comments

Is your feature request related to a problem? Please describe.
I tried to use direflow within the new version of material-ui (the version "@mui/[email protected]"). The style is not injected inside the web component even if I am using the plugin "material-ui" on direflow component declaration.

Describe the solution you'd like
Maybe creating a new plugin dedicated to the new version of material-ui.

rocknatt avatar Nov 05 '21 13:11 rocknatt

i'm experiencing the same aswell, any work arounds?

9Lambda avatar Jan 31 '22 00:01 9Lambda

I have tried to apply a fix for this by adding a material-ui v5 plugin using StylesProvider with CacheProvider. I have also tried using StyledEngineProvider as mui v5 uses emotion from jss. So far neither have worked, but keen to get some input.

` import React from 'react'; import createCache from '@emotion/cache'; import uniqueid from 'lodash.uniqueid'; import { IDireflowPlugin } from '../types/DireflowConfig'; import { PluginRegistrator } from '../types/PluginRegistrator';

  const muiPlugin: PluginRegistrator = (
   element: HTMLElement,
   plugins: IDireflowPlugin[] | undefined,
   app?: JSX.Element,
    ) => {
   if (plugins?.find((plugin) => plugin.name === 'mui')) {
      try {
  const [emotionCache, setEmotionCache] = useState(null);

  const { create } = require('jss');
  const { StyledEngineProvider } = require('@mui/material/styles');
  const createCache = require('@emotion/cache');
  const { CacheProvider } = require('@emotion/react');
  const seed = uniqueid(`${element.tagName.toLowerCase()}-`);

  const emotionRoot = document.createElement('style');
  const mountPoint = document.createElement('div');

  mountPoint.id = 'mui-v5-dire-flow';

  const cache = createCache({
    key: 'css',
    prepend: true,
    container: emotionRoot,
  });

  return [
  <StyledEngineProvider injectFirst>
    <CacheProvider value={cache}>
      {app}
    </CacheProvider>,
  </StyledEngineProvider>,
    mountPoint,
  ];
} catch (err) {
  console.error('Could not load MUI. Did you remember to install @MUI?');
    }
  }
};

  export default muiPlugin;

`

Steph-Yu avatar Feb 05 '22 04:02 Steph-Yu

Can we expect an updated plug-in to support MUI 5 in the near future?

Tekkromancer avatar May 03 '22 17:05 Tekkromancer

Can we expect an updated plug-in to support MUI 5 in the near future?

Maybe? https://github.com/Silind-Software/direflow/issues/221 Sounds like this project is stalled and needs for maintainers.

Stevemoretz avatar May 19 '22 09:05 Stevemoretz