[question] can we use mui-x(material) with base ui, mui system?

[junh0328]

The problem in depth

In my case, I've been using @mui/system and @mui/base for constructing my own customized component. But, I need to use Date Range components. So I decided to buy pro plan for using it.

As you guys know, Mui X is based on @mui/material. So there are many conflicts for using it. I attached image that I met!

I already made own palette like these.

import {
  unstable_createCssVarsProvider as createCssVarsProvider,
  createTheme,
  unstable_prepareCssVars as prepareCssVars,
} from '@mui/system';
import { type PColorScheme, getPColorScheme } from './color-scheme';
import type { PPalette } from './colors.model';

type SpotColorSchemeName =
  | 'lightGreenRed'
  | 'darkGreenRed'

type TColorSchemes = { [key in SpotColorSchemeName]: PColorScheme };

const defaultColorSchemes: {
  light: SpotColorSchemeName;
  dark: SpotColorSchemeName;
} = {
  light: 'lightGreenRed',
  dark: 'darkGreenRed',
};

const defaultColorScheme = defaultColorSchemes.light; 

type Theme = {
  colorSchemes: TColorSchemes;
  palette: {
    colorScheme: 'light' | 'dark';
  } & PColorScheme['palette'];
} & ReturnType<typeof prepareCssVars>;

function extendTheme({ cssVarPrefix = 'p' } = {}) {
  const colorSchemeSelector = 'data-p-color-scheme';

  const colorSchemes: TColorSchemes = {
    lightGreenRed: getPColorScheme('light', 'green', 'orange'),
    ...
    darkGreenRed: getPColorScheme('dark', 'green', 'orange'),
    ...
  };

  const { vars: themeVars, ...params } = prepareCssVars(
    { colorSchemes, defaultColorScheme: defaultColorScheme },
    {
      prefix: cssVarPrefix,
      colorSchemeSelector,
    },
  );
  const theme: Theme & { colorSchemeSelector: string } = {
    ...createTheme(), // @mui/system의 기본 테마 속성들을 제공
    colorSchemeSelector,
    colorSchemes,
    vars: themeVars as { palette: PPalette },
    palette: {
      ...colorSchemes[defaultColorScheme].palette,
      colorScheme: colorSchemes[defaultColorScheme].palette.mode,
    },
    ...params,
  };
  return theme;
}

const pCustomTheme = extendTheme();

const { CssVarsProvider, useColorScheme } = createCssVarsProvider<SpotColorSchemeName>({
  theme: pCustomTheme,
  modeStorageKey: 'p-theme-mode',
  defaultColorScheme: defaultColorSchemes,
});

export { CssVarsProvider, useColorScheme, type Theme as IPCustomTheme, type SpotColorSchemeName };

...

import { type Theme, alpha } from '@mui/system';
import type { PPalette } from './colors.model';
import pColorsDark from './p-colors-dark';
import pColorsLight from './p-colors-light';

type PaletteMode = Theme['palette']['mode'];

interface PColorScheme {
  palette: PPalette;
}

function getPColorScheme(
  mode: PaletteMode,
  upColor: 'green' | 'red' | 'lightGreen',
  downColor: 'orange' | 'blue' | 'vividOrange',
): PColorScheme {
  const colors = mode === 'dark' ? pColorsDark : pColorsLight;

  return {
    palette: {
      mode,
      ...colors,
      primary: {
        default: colors.ultramarine[800],
      },
      text: {
        default: colors.gray[1200],
      },
      background: {
        default: colors.gray[100],
        spotBg1: colors.spot.bg1,
        spotBg2: colors.spot.bg2,
        spotBg3: colors.spot.bg3,
        spotBg4: colors.spot.bg4,
      },
      up: {
        darkest: colors[upColor][700],
        darker: colors[upColor][600],
        dark: colors[upColor][500],
        default: colors[upColor][400],
        light: colors[upColor][300],
        lighter: colors[upColor][200],
        lightest: colors[upColor][100],
      },
      down: {
        darkest: colors[downColor][700],
        darker: colors[downColor][600],
        dark: colors[downColor][500],
        default: colors[downColor][400],
        light: colors[downColor][300],
        lighter: colors[downColor][200],
        lightest: colors[downColor][100],
      },
      modalShadow: alpha('#000000', 0.25),
    },
  };
}

export { type PColorScheme, getPColorScheme };

In this case, how can I use mui-x component with my own palette that made by @mui/system?

Your environment

`npx @mui/envinfo`

    "@emotion/react": "^11.13.3",
    "@emotion/styled": "^11.13.0",
    "@mui/base": "^5.0.0-beta.59",
    "@mui/material": "^6.1.4",
    "@mui/system": "^6.1.4",
    "@mui/x-date-pickers-pro": "^7.18.0",
    "@mui/x-license": "^7.18.0",
    "dayjs": "^1.11.13",

Search keywords: -
Order ID: 98797