Styles : React et Material UI¶

Librairie de composantes pré-stylisées.

Pour l’installer dans votre projet :

npm i @mui/material @emotion/react @emotion/styled
npm i @fontsource/roboto
npm install @mui/icons-material

Utiliser Material UI¶

{!personnage_MUI/src/components/Personnage/Personnage.tsx!}

Thèmes dans Material UI¶

La manière la plus efficace pour changer l'apparence de votre application avec Material UI est l'utilisation de thèmes.

La place idéale pour ajouter un thème à votre application est App.tsx :

{!personnage_MUI/src/components/App/App.tsx!}

Vous pouvez aussi assigner une apparence spécifiquement à un type de composant comme suit :

components: {
    MuiButton: {
      styleOverrides: {
        root: {
          backgroundColor: '#172325 ',
          color: '#007AFF',
          primary: '#FFFFFF',
          ':hover': {
            color: '#5C5757',
          },
        },
      },
    },
  },