Material-UI est une librairie de composants React qui implémentent les guidelines de Google en terme de Material Design que l'on retrouve dans les interface des applications Google comme Gmail, Google Photos ou encore dans les applications Android.

Pre requis

Material-UI a été conçu pour être utilisé avec avec un ensemble de Fonts pour :

• les textes (Roboto) : npm install typeface-roboto --save qui sont a utiliser avec le composant <Typography />
• les icônes il est possible d’utiliser au choix avec les composants <Icon> et <SvgIcon>
  • les Material icons de Google : npm install @material-ui/icons
  • la collection de fonts Font Awesome : npm install @fortawesome/fontawesome-free

La doc conseil tant que possible d'utiliser les versions SVG (explication de la migration chez GitHub)  qui permettent un meilleurs rendu, plus rapide etc.

Couleurs

Le système de couleurs Material Design a été implémenté dans Materiel-UI pour nous offrir la possibilité de créer des thèmes de couleurs personnalisés. Ce système de Thème repose sur 2 couleurs principales Primaire et Secondaire, avec leurs variantes clair et foncées (ce qui représente 6 couleurs) pour créer une interface sobre avec une certaine cohérence dans le choix des couleurs.

Choix des couleurs

Pour la partie visuelle, il existe des outils pour nous aider à faire le choix des couleurs:

• le très Basic color tool de Matrial-UI
• le générateur de Theme MUI de IYS
• la palette de l'équipe Material Design qui peut s'utiliser en association avec cet outil

Utilisation d'un thème de couleurs

Pour pouvoir appliquer un thème de couleurs à notre webapp une fois les couleurs choisies, il faut passer par un certain nombre d'étapes :

1. l'import de couleurs nommées depuis '@material-ui/core/colors/...' ou le code Hexa de la couleur
2. la création d'un thème grâce à la méthode createMuiTheme à qui on fourni des options dont un objet palette dans lequel on défini les couleurs et éventuellement les variantes (voir l'objet theme fourni par défaut qui contient l'objet palette theme.palette).

import { createMuiTheme } from "@material-ui/core/styles";
import purple from "@material-ui/core/colors/purple";

const notreTheme = createMuiTheme({
  palette: {
    primary: purple,
    secondary: {
      main: "#f44336",
    },
  },
});

3. l'application de ce thème à une arborescence (appliquer de préférence à la racine) de composants (héritage par le React Context) grâce au composant <MuiThemeProvider> à qui on associe le thème créé précédemment:

function App() {
  return (
    <MuiThemeProvider theme={notreTheme}>
      <Root />
    </MuiThemeProvider>
  );
}

render(<App />, document.querySelector("#app"));

Disposition

Layout

MUI repose comme Boostrap sur un découpage en 12 colonnes (comme Bootstrap) et utilise les CSS FlexBox pour la disposition & responsiveness. Une interface sera donc crée en combinant containers et items tous deux props du composant .

Pour adapter l'affichage aux différentes résolutions (mobile, tablettes ou écrans), le système de grille de MUI dispose de 5 breakpoints que l'on peut retrouver dans l'objet theme.breakpoints.values:

• xs, extra-small:  > 0px
• sm, small: > 600px
• md, medium: > 960px
• lg, large: > 1280px
• xl, xlarge: > 1920px

On exploite ces breakpoints grâce aux composants <Grid /> ou <Hidden /> qui permet de montrer  ou de cacher une arborescence de composants en fonction des breakpoints vu précédemment.

Material UI fourni un reset CSS sous forme de composant le <CssBaseline />. Il permet de retirer les marges par défaut et réduire les écarts d'affichages entre différents navigateurs.