Englobity
React Material-ui custom web components
Installation
npm i --save @material-ui/pickers @mui/material @mui/lab @engloba-tech/englobity
After Instalation, we must initiate englobityTheme.
Create your own styles in your root project
styles/color.styles.js
export const color = {
basic: {
brightest: '',
brighter: '',
bright: '',
normal: '',
semidark: '',
dark: '',
darker: '',
},
primary: {
dark: '',
light: '',
main: '',
},
secondary: {
dark: '',
light: '',
main: '',
},
action: {
error: '',
activeButton: '',
},
};styles/globals.styles.js
import { color } from './color.styles';
export const globals = {
html: {
fontSize: '',
},
body: {
backgroundColor: color.secondary.main,
},
};And use methon createEnglobaMaterialTheme to define the Theme
styles/index.js
import { color } from './color.styles';
import { globals } from './globals.styles';
import { createEnglobaMaterialTheme } from '@engloba-tech/englobity';
// create material engloba theme
const fontFamily = ['Poppins', 'Roboto'].join(',');
const theme = createEnglobaMaterialTheme(color, globals, fontFamily);
export default theme;This theme, you must instanciate at your index.js
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import globalStyles from './styles';
import { ThemeProvider } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';
[. . .]
ReactDOM.render(
<ThemeProvider theme={globalStyles}>
{/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
<CssBaseline />
<App />
</ThemeProvider>,
document.getElementById('root'));