React et les styles

Styled-components

• CSS dans le code JavaScript pour laisser React créer les fichiers css.
• Fini les erreurs css lorsqu’on utilise le même nom de classe par erreur.

Pour l’installer dans votre projet :

console

npm i styled-components
npm i @types/styled-components --save-dev

Remplacer le css par un fichier tsx

personnage.styles.tsx

import styled from 'styled-components';

export const PersonnageContainer = styled.div`
  max-width: 400px;
  width: 300px;
  margin: 0 auto;
  background-color: #fff;
  color: #000;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
`;

export const PersonnagePhoto = styled.div`
  text-align: center;
  margin-bottom: 20px;
`;

export const PersonnageImage = styled.img`
  width: 150px;
  height: 150px;
  border-radius: 50%;
`;

export const PersonnageInfo = styled.div`
  margin-bottom: 20px;
`;

export const PersonnageAddress = styled.p`
  font-style: italic;
`;

personnage.component.tsx

import {
  PersonnageContainer,
  PersonnageAddress,
  PersonnageImage,
  PersonnageInfo,
  PersonnagePhoto,
} from './personnage.styles';

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

const Personnage = (props: IPersonnageProps) => {
  return (
    <PersonnageContainer>
      <PersonnagePhoto>
        <PersonnageImage src={props.photo} />
      </PersonnagePhoto>
      <PersonnageInfo>
        <PersonnageAddress as="span">{props.nom}</PersonnageAddress>
        <PersonnageAddress>{props.adresse}</PersonnageAddress>
      </PersonnageInfo>
    </PersonnageContainer>
  );
};

export default Personnage;

Truc

Utilisation d’un style pour un autre type d’élément HTML avec la mention as :

<PersonnageAddress as="span">{props.nom}</PersonnageAddress>

CodeSandbox

Démo - Styled Components

Manuel

Styled Components - Basics

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.component.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 './components/personnage.component';
import { IPersonnageData, 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