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
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;
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
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