Styles : React et Material UI

Librairie de composantes pré-stylisées.

Pour l’installer dans votre projet :

console

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

Manuel

Material UI - Installation

Utiliser Material UI

Personnage.tsx

import Card from '@mui/material/Card';
import CardMedia from '@mui/material/CardMedia';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import { Grid } from '@mui/material';

interface IPersonnageProps {
  nom: string;
  photo: string;
  adresse: string;
}

const Personnage = (props: IPersonnageProps) => {
  return (
    <Card sx={{ width: 400 }}>
      <Grid container spacing={0} direction="column" alignItems="center">
        <CardMedia
          image={props.photo}
          sx={{ height: 150, width: 150, borderRadius: '50%' }}
        />
      </Grid>
      <Box>
        <Typography variant="subtitle1">{props.nom}</Typography>
        <Typography variant="subtitle1">{props.adresse}</Typography>
      </Box>
    </Card>
  );
};

export default Personnage;

CodeSandbox

Démo - Material UI

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.

Manuel

Material UI - Theming

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

app.tsx

import Personnage from "../Personnage";
import type { IPersonnageData } from "../../data/PersonnageData";
import { PersonnageData } from "../../data/PersonnageData";
import "./App.css";
import { createTheme, ThemeProvider } from "@mui/material/styles";
import { CssBaseline } from "@mui/material";

function App() {
  const theme = createTheme({
    typography: {
      fontFamily: ["Cutive Mono", "monospace"].join(","),
    },
    palette: {
      mode: "light",
      primary: {
        main: "#c75000",
      },
      secondary: {
        main: "#f50057",
      },
      background: {
        default: "#2f1000",
        paper: "#202027",
      },
      text: {
        primary: "#EFECEC",
        secondary: "#FFFFFF",
        disabled: "rgba(70,38,38,0.5)",
      },
    },
    components: {
      MuiCssBaseline: {
        styleOverrides: `
        @font-face {
          font-family: 'Cutive Mono';
          font-style: normal;
          font-display: swap;
          font-weight: 400;
          }
      `,
      },
    },
  });

  return (
    <>
      <ThemeProvider theme={theme}>
        <CssBaseline />
        {PersonnageData.map((personnage: IPersonnageData) => {
          return (
            <Personnage
              nom={personnage.nom}
              photo={personnage.photo}
              adresse={personnage.adresse}
            />
          );
        })}
      </ThemeProvider>
    </>
  );
}

export default App;

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

app.tsx

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

Manuel

Material UI - Button - CSS