WebPros MUI Theme

MUI theme based on MUI V6 and Material Design V3.

• WebPros Dashboard Designs
• Material UI V3 Components

Installation

Install the package in your project with:

yarn add @webpros/webpros-material-library

Ensure your package.json includes

{
  "dependencies": {
    // Other deps
    "@material/material-color-utilities": "^0.3.0",
    "@mui/material": "^6.4.0",
    "@mui/utils": "^6.4.0",
    "@mui/x-data-grid": "^7.29.0",
    "@mui/x-date-pickers": "^7.29.0",
    "@phosphor-icons/react": "^2.1.0"
    // Other deps
  }
}

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-material-library';

2. Create new wrapper-component for the theme provider

import { getMuiLocaleByCode, WebProsMuiThemeProvider } from '@webpros/webpros-material-library';
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/webpros-material-library';

Releases

The release cycle will be available soon

Contributing

The contributing guide will be available soon