About

MUI theme based on MUI V6 and Material Design V3.

• Repository - webpros-dashboard/webpros-mui-theme
• Designs - Figma

Installation

Ensure your package.json includes peerDependecies of the current package.

Install the package in your project with:

yarn add @webpros/mui-theme

Usage

1. Add the type import at the top of your main application file or theme setup file. This import is required for MUI TypeScript augmentation to work correctly:

// global.d.ts
import type _ from '@webpros/@webpros/mui-theme';

2. Create new wrapper-component for the theme provider

import { getMuiLocaleByCode, WebProsMuiThemeProvider } from '@webpros/mui-theme';
import { StyledEngineProvider } from '@mui/material/styles';
import { Localization } from '@mui/material/locale';
import { ReactNode, useMemo } from 'react';
import { useLocale } from 'your-locale-code-provider';

const YourLocalesToMuiLocales: Record<string, Localization> = {
  en: getMuiLocaleByCode('enUS'),
  ru: getMuiLocaleByCode('ruRU'),
  de: getMuiLocaleByCode('deDE'),
  es: getMuiLocaleByCode('esES'),
  fr: getMuiLocaleByCode('frFR'),
  it: getMuiLocaleByCode('itIT'),
  ja: getMuiLocaleByCode('jaJP'),
  pt: getMuiLocaleByCode('ptPT'),
};

export const getMUILocalization = (locale: string) => YourLocalesToMuiLocales[locale];

type WebprosThemeProviderProps = {
  children: ReactNode;
};

export const WebprosThemeProvider = ({ children }: WebprosThemeProviderProps) => {
  const [locale] = useLocale();

  const localization = useMemo(() => getMUILocalization(locale), [locale]);

  return (
    <StyledEngineProvider>
      <WebProsMuiThemeProvider localization={localization}>{children}</WebProsMuiThemeProvider>
    </StyledEngineProvider>
  );
};

3. Wrap your application with WebprosThemeProvider

const App = () => (
  // Other code
  <WebprosThemeProvider>// children goes here</WebprosThemeProvider>
  // Other code
);

4. Use imports from @mui/material for components

import { Box } from '@mui/material'; // NOT import { Box } from '@webpros/mui-theme';