MUI v7 theme for WebPros products
npm install @webpros/mui-themeMUI theme based on MUI V6 and Material Design V3.
- Repository - webpros-dashboard/webpros-mui-theme
- Designs - Figma
Ensure your package.json includes peerDependecies of the current package.
Install the package in your project with:
``bash`
yarn add @webpros/mui-theme
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:
`typescript`
// global.d.ts
import type _ from '@webpros/mui-theme';
2. Create new wrapper-component for the theme provider
`tsx
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
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 (
);
};
`
3. Wrap your application with WebprosThemeProvider
`tsx`
const App = () => (
// Other code
// Other code
);
4. Use imports from @mui/material for components
`tsx`
import { Box } from '@mui/material'; // NOT import { Box } from '@webpros/mui-theme';
The package exports custom ESLint rules to enforce Material Design 3 design system best practices. To use them in your project:
`js
// eslint.config.js
import webprosMuiThemeRules from '@webpros/mui-theme/eslint';
export default [
// ... your other config
{
plugins: {
'@webpros/mui-theme': webprosMuiThemeRules,
},
rules: {
'@webpros/mui-theme/no-palette-usage': 'error',
'@webpros/mui-theme/no-standard-typography-variants': 'error',
'@webpros/mui-theme/no-hardcoded-typography-in-sx': 'error',
},
},
];
`
For detailed documentation of available rules, see configs/eslint/README.md.
To add a new custom rule:
1. Create a new file in configs/eslint/rules/ with your rule implementation (use CommonJS format)module.exports
2. Export the rule using configs/eslint/index.cjs
3. Import and add it to using require()eslint.config.js
4. Add the rule to in the plugins and rules sectionsconfigs/eslint/README.md
5. Document the rule in
Test your custom rules by running ESLint on specific files:
`bashTest on a specific file
npx eslint src/path/to/file.ts
For more information about the existing custom rules and their usage, see eslint/README.md.
Tools configuration
Webpack
If you use Webpack, you probably need to add the following rules to your configuration:
`js
module: {
rules: [
{
test: /\.m?js/,
type: 'javascript/auto',
resolve: {
fullySpecified: false,
},
}, // your other rules
];
}
``