inarix-theme v1.1.2

inarixTheme

Version v1.1.2

About

TODO

Install

yarn add inarix-theme , npm i inarix-theme

Getting started

When the package has been installed the user have some stuff to make it works.

1.- If the file bash global.d.ts or global.d.js exist , the user must have the declare the module as: declare module 'inarix-theme'; 1.1.- If the file bash global.d.ts or global.d.js doesn't exist, create in the src folder and follow the previous steps.

2.- Following the MUI steps, the user have to create a global MUI theme file.

Example

import { createTheme } from '@mui/material/styles';
import { frFR, enUS } from '@mui/x-data-grid';

const language = localStorage.getItem('i18nextLng');

const setLanguage = () => {
  if (language == 'fr') {
    return frFR;
  } else {
    return enUS;
  }
};

const themeInarix = createTheme(
  {
    palette: {
      primary: {
      main:'any color '
      },
    },
  },
  setLanguage(), //<==== Important to use this little function to set the correct languaje of the components using i18Next
);

3.- Last step to use MUI Inarix is change the previous code for this:

coimport { createTheme, ThemeOptions } from '@mui/material/styles';
import { inarixColors, inarixThemeMui } from 'inarix-theme';
import { frFR, enUS } from '@mui/x-data-grid';

const language = localStorage.getItem('i18nextLng');

const setLanguage = () => {
  if (language == 'fr') {
    return frFR;
  } else {
    return enUS;
  }
};

const themeInarix = createTheme(inarixThemeMui as ThemeOptions, setLanguage());

Finally the user will have all the inarix colors in the MUI theme.

How to use the new inarix components styles library?

Now in the package the user have disponible the import { InarixMuiComponents } from "inarix-theme"

with this the user can use instead to use this :

export const AccordionDetails = styled(MuiAccordionDetails)(() => ({
  backgroundColor: inarixColors.p12,
  borderRadius: '2px',
  borderBottom: '1px solid rgba(0, 0, 0, .125)',
  marginBottom: -1,
  minHeight: 56,
}))

to use this:

export const AccordionDetails = styled(MuiAccordionDetails)(
  () => InarixMuiComponents.tablesInarixStyles.AccordionDetailsInarixStyle,
);

The documentation is not ready yet, but soon you will find in what components from Mui corresponds the styles.

If the user would like to access to the MUI inarix colors can find it in the nodeModules inarix and import the scss file inside src/scss/InarixStyles.modules.scss to the main scss file in the proyect to access to all scss variables.