MUI

Introduction

Material UI est une librairie de composants React qui implémente les composants Material Design de Google¹². Ceux-ci sont donc conçus pour optimiser l'expérience utilisateur (UX) et constituent donc une référence fiable pour les designers et développeur.

Le principe des composants web repose sur l'encapsulement de fonctionnalités au sein d'un même élement qui peut ensuite être réutilisé sans crainte dans une interface/un projet.³

Stying components

Il est possible de styliser des composants de différentes manières, chacune ayant leurs avantages et leurs inconvénients.

Classical Method

Il est fréquent de créer une feuille de style css par composant. Généralement, celle-ci portera le même nom que le composant dans lequel elle est importée.

/*component.css*/

.component-class{
    width:100%;
    margin: 0 auto;
    color: white;
}
.component-text {
    font-size:12px;
}

//Component.jsx

import "./component.css";

const Component = () => {
    return (
        <div className="component-class">
            <p className="component-text">Some text for the example</p>
        </div>
    )
}

export default Component

Bien qu'il soit possible d'actualiser le style d'un composant de façon "classique", cette méthode ne permet pas l'encapsulement et par conséquent le style attribué est susceptible de toucher d'autres éléments du projet.

CSS modules approach

De la même manière que les modules en Javascript, il est possible d'importer un fichier CSS en tant que module.

Other components libraries

Links

• Material Design | Github
• "Introductiong the M3 design kit for Figma" | Material Design Blog

Footnotes

1. Source: Material UI Overview ↩

2. Pour l'heure, les composants de la librairie Material Design sont destinés à Android et disposés à être utilisés avec Flutter et Jetpack Compose. Un déploiement pour le web est en cours d'élaboration (Source: Material Web) ↩

3. Source: Web Components |MDN Web Docs ↩