Below implementation custom color's with Mui/Joy & Material with Next.js /page route

Create a ThemeProvider component which we will be using it to store our custom theme, I have added custom colors and break points feel free to use it as your starting point.

CssVarsProvider is deprecated works for now but need to replace it in future releases

ThemeProvider.tsx

import {
    extendTheme as materialExtendTheme,
    CssVarsProvider as MaterialCssVarsProvider,
    THEME_ID as MATERIAL_THEME_ID,
} from '@mui/material/styles';
import { CssVarsProvider as JoyCssVarsProvider } from '@mui/joy/styles';
import CssBaseline from '@mui/material/CssBaseline';

declare module '@mui/material/styles' {
    interface Palette {
        white: {
            main: string;
            light: string;
            contrastText: string;
        }
        black: {
            dark: string;
            main: string;
            light: string;
            lightest: string;
        }
    }
we
    interface PaletteOptions {
        white?: {
            main: string;
            light: string;
            contrastText: string;
        }
        black?: {
            dark: string;
            main: string;
            light: string;
            lightest: string;
        }
    }
}

const theme = {
    colorSchemes: {
        light: {
            palette: {
                background: {
                    default: '#FAFAFF', // Winter
                    paper: '#FAFAFF', // Winter
                },
                primary: {
                    main: '#00008B',  // Royal
                    contrastText: '#FAFAFF',
                    light: '#E6E6F0',
                    dark: '#dfdff7',
                },
                secondary: {
                    main: '#0A64BC',  // Sea
                    contrastText: '#FAFAFF',
                },
                success: {
                    main: '#157811' // Wealth
                },
                warning: {
                    main: '#D53F55' // Red Rose
                },
                white: {
                    main: '#FAFAFF', // Winter
                    light: '#FFFFFF', // vennila white
                    contrastText: '#1B2D44',
                },
                black: {
                    dark: '#0A0A0A', // Jet
                    main: '#1B2D44', // Midnight
                    light: '#666666', // Platinum 40
                    lightest: '#D9D9D9', // Platinum
                },

            },
        },
    },
    breakpoints: {
        values: {
            xs: 0,
            sm: 481,
            md: 769,
            lg: 1025,
            xl: 1201
        }
    },

} satisfies Parameters<typeof materialExtendTheme>[0];

const materialTheme = materialExtendTheme(theme);

export default function ThemeProvider({ children }: { children: React.ReactNode }) {
    return (
        <MaterialCssVarsProvider theme={{ [MATERIAL_THEME_ID]: materialTheme }}>
            <JoyCssVarsProvider>
                <CssBaseline enableColorScheme />
                {children}
            JoyCssVarsProvider>
        MaterialCssVarsProvider>
    );
}

Lets import and wrap ThemeProvider around our main _app.jsx

_app.jsx

import ThemeProvider from './ThemeProvider';

export default function App({ Component, pageProps }) {
  return (
    <ThemeProvider>
      <Component {...pageProps} />
    ThemeProvider>
      )
  }

Example usage

import { Button} from '@mui/material';

<Button
    type="submit"
    sx={{
        backgroundColor: 'primary.main',
        color: 'white.light',
        fontWeight: '500',
        fontSize: '14px',
        textTransform: 'none',
        borderRadius: '100px',
    }}
>
    Save
Button>

My take

From my personal experience I feel mui/joy doesn't hold its position comparing to its elder brother mui/material Its not a fair comparison cause its still in beta version still I tried and at the end of the day I dont have the seamless integration feeling even after I got everything work together.

I dont recommend to use it in your production environment (have fun testing in your side project’s) there is long way to go. I highly suggest you to stick with mui/material no need to make thing's complicated than they are.