material-ui: Can't use Joy and Material UI together

For anyone that comes across this issue, we just published a doc that shows how to use both libraries together.

https://mui.com/joy-ui/guides/using-joy-ui-and-material-ui-together/

For anyone that comes across this issue, we just published a doc that shows how to use both libraries together.

https://mui.com/joy-ui/guides/using-joy-ui-and-material-ui-together/

This guide is now at: https://mui.com/joy-ui/integrations/material-ui/

Are Mui and Mui Joy compatible? I wouldn’t think they would conflict but is that possible?

Btw I forgot to mention it in my last message. Joy is looking great! From the stuff I’ve seen so far I think it’s going to be a great new package!

theme.txt I was using joy theme with a little material theme , and with a new project , following https://mui.com/joy-ui/guides/using-joy-ui-and-material-ui-together/ but I can’t load shouldSkipGeneratingVar from @mui/material/styles , as matter of fact there is no more export for that in the lib . and the https://codesandbox.io/s/joy-ui-feat-material-ui-k86j2j?file=/demo.tsx is buggy too, I use jsx and not typescript. my package.json is : “@mui/icons-material”: “^5.11.11”, “@mui/joy”: “5.0.0-alpha.70”, “@mui/material”: “^5.11.12”, “@mui/styles”: “^5.11.12”, “@mui/utils”: “^5.11.12”,

@Rafcin @echarles @Michael-Davies @persunde Thanks for the interest in using Joy UI! really appreciate it.

I now see the use case for using Joy with Material UI and worked on #33379 to make both of them compatible in an intuitive way.

Here is the code example (which will be released next week): https://codesandbox.io/s/joy-cra-typescript-forked-c9csds?file=/src/App.tsx

NOTE that this is just a workaround for using Joy UI because of small supported components. Once Joy is mature, we are not encouraged to use both Joy UI and Material UI in the same project because you would have 2 design guidelines in the same application (I don’t think this is a good practice but I am also happy to be proven wrong 😁).

Hey @Rafcin, we’re glad to see some early interest in using Joy UI－so cool! Getting to your question:

Are Material UI and Joy UI compatible? I wouldn’t think they would conflict but is that possible?

I’d say they should be. However, we haven’t yet prepared any documentation for that, nor have we figured out the edge cases (some that you’re finding out now) for them to co-exist. As I figure that this use case will probably be a common one (folks that are used to Material UI willing to test Joy UI out), we definitely will look into creating proper guidance to assist you.

For the time being, I guess @siriwatknp will be able to sort some details. By the end of Q3, we hope to have Joy UI in a much more solid place, and hopefully with this process documented!

Hi @danilo-leal, thanks for your response!

I actually managed to get something working by just duplicating the theme on both providers.

"use client";
import {
  CssVarsProvider as JoyCssVarsProvider,
  extendTheme as joyExtendTheme,
} from "@mui/joy/styles";
import CssBaseline from "@mui/joy/CssBaseline";
import React from "react";
import {
  experimental_extendTheme as materialExtendTheme,
  Experimental_CssVarsProvider as MaterialCssVarsProvider,
  THEME_ID as MATERIAL_THEME_ID,
} from "@mui/material/styles";

const theme = {
  colorSchemes: {
    light: {
      palette: {
        mode: "light",
        background: {
          default: "#ffffff",
        },
        primary: {
          main: "#503fc9",
          50: "#ece5fd",
          100: "#cdbdf8",
          200: "#ae98f1",
          300: "#8e76e7",
          400: "#6e58da",
          500: "#503fc9",
          600: "#342cb5",
          700: "#1d1e9c",
          800: "#111580",
          900: "#101063",
        },
      },
    },
    dark: {
      palette: {
        mode: "dark",
        background: {
          default: "#121212",
        },
        primary: {
          main: "#503fc9",
          50: "#ece5fd",
          100: "#cdbdf8",
          200: "#ae98f1",
          300: "#8e76e7",
          400: "#6e58da",
          500: "#503fc9",
          600: "#342cb5",
          700: "#1d1e9c",
          800: "#111580",
          900: "#101063",
        },
      },
    },
  },
} satisfies Parameters<typeof materialExtendTheme>[0];

const materialTheme = materialExtendTheme(theme);
const joyTheme = joyExtendTheme(theme as any);

export default function ThemeProvider({ children }: Component) {
  return (
    <MaterialCssVarsProvider
      theme={{ [MATERIAL_THEME_ID]: materialTheme }}
      defaultMode="system"
    >
      <JoyCssVarsProvider theme={joyTheme} defaultMode="system">
        <CssBaseline enableColorScheme />
        {children}
      </JoyCssVarsProvider>
    </MaterialCssVarsProvider>
  );
}

The only caveat is that the color mode setting for the MUI X components doesn’t seem to work when running it locally on Windows (but it works fine when built and deployed).

@danilo-leal sounds good I’ll open one up!

Thank you @siriwatknp!! I’ll give this a shot and see how it works!

For my main project, I’ve taken Aspect Ratio & Card and added them to my own set of components that use MUI by just rewriting it and taking out the Joy aspects of it. Works super well for now.

Also @danilo-leal @siriwatknp I wanted to ask, would it be alright if I proposed a feature request for a carousel component? After looking at card and aspect ratio for a while I’ve been writing just some random test components and I’ve started to make a scroll snap carousel with Tanstacks react-virtual pkg. I know standard MUI doesn’t have this but could Joy use a carousel component?

@Rafcin Not sure how you got the repo but that is outdated, sorry for that.

Are Mui and Mui Joy compatible? I wouldn’t think they would conflict but is that possible?

Absolutely yes, both of them are powered by the same engine. However, there is some gotcha that needs to be aware of:

• Theme structure is not exactly the same between Joy and Material (otherwise, it would be the same library 😂), so to use them together the theme has to contain the necessary structure for both libraries.
• Joy needs CssVarsProvider to work (it can be instantiated by Joy or Material UI)
• Joy and Material UI use the same React context due to the emotion-theming approach.

After #33379 is merged, here is how to use Joy with Material UI.

import * as React from "react";
import { deepmerge } from "@mui/utils";
import {
  Experimental_CssVarsProvider as CssVarsProvider,
  experimental_extendTheme as extendMuiTheme,
  shouldSkipGeneratingVar as muiShouldSkipGeneratingVar,
} from "@mui/material/styles";
import { extendTheme as extendJoyTheme, shouldSkipGeneratingVar as joyShouldSkipGeneratingVar, } from "@mui/joy/styles";
import Button from "@mui/joy/Button";

// 1. create Joy and Material UI theme
const joyTheme = extendJoyTheme({ cssVarPrefix: "mui" }); // any value that refer to CSS variables will have `--mui` prefix to match Material UI default prefix
const muiTheme = extendMuiTheme();

export default function App() {
  // NOTE that we are using `CssVarsProvider` from Material UI (it will set the default prefix as '--mui-*' for the generated CSS variables)
  return (
    <CssVarsProvider
      // you can use any deepmerge function, eg. https://lodash.com/docs/4.17.15#merge
      theme={deepmerge(joyTheme, muiTheme)} // merge both themes (Material UI has higher priority)
      // exclude some part of the theme from being generated as CSS variables (try commenting this line and check CSS variables in the devtool)
      shouldSkipGeneratingVar={keys => muiShouldSkipGeneratingVar(keys) || joyShouldSkipGeneratingVar(keys)}
    >
      <Button>Button</Button>
    </CssVarsProvider>
  );
}

So I’ve created an experimental branch for my site that will run Joy, and once it’s a little more fleshed out ill convert everything to Joy. In the meantime, I’ve migrated to using the experimental vars in MUI and asked for Aspect Ratio and Card, I took the components from Joy and rewrote them partially to work with standard MUI. I removed the variant and color props and added some of my own extra props for them and it works like a charm.

A workaround that seems to be working for me is to use Experimental_CssVarsProvider when I have a Material UI component that I need to use. YMMV. An example:

import { Experimental_CssVarsProvider } from '@mui/material/styles';
import { CssVarsProvider } from '@mui/joy/styles';

export default function Start() {
  return (
          <Card sx={{ minWidth: 275 }}>
              <CardContent>
                  <Typography level="h6" component="div">Joy Component</Typography>
                  <Experimental_CssVarsProvider>
                      <LinearProgress 
                          variant="determinate" 
                          value={20} 
                      />
                  </Experimental_CssVarsProvider>
              </CardContent>
          </Card>
)}

I am trying to have a application which mixes the standard mui (material-ui) and the new joy components. To do that, I wrap the mui StyledEngineProvider/CssVarsProvider into the mui ThemeProvider to finally receive undefined exception when I try to access the mui (material-ui) theme.

This lead me to think that both are incompatible for now, which is not the best experience from 2 libraries coming from the same project.