Adapt components with new css & NextJs rules

components/teks/teks.js

@@ -3,7 +3,7 @@
 import {useEffect} from 'react'
 import PropTypes from 'prop-types'
 import Box from '@mui/material/Box'
-import Grid from '@mui/material/Grid2'
+import Grid from '@mui/material/Grid'
 import Typography from '@mui/material/Typography'
 import Tooltip from '@mui/material/Tooltip'
 import {useMediaQuery} from '@mui/material'
@@ -138,8 +138,8 @@ export default function Teks({parole}) {
 
   return (
     <Root className={classes.container}>
-      <Box sx={{textAlign: 'center', marginTop: 1}}>
-        <Typography variant='h4' component='div' display='block' marginBottom={2}>
+      <Box sx={{textAlign: 'center', marginTop: 12}}>
+        <Typography variant='h4' component='div' display='block' marginbottom={2}>
           <Typography gutterBottom color='primary' variant='h6' component='div'>
             {enhancedAliases.map(({type, value}) => {
               if (type === 'element') {
@@ -151,7 +151,7 @@ export default function Teks({parole}) {
               return <span key={value} className={classes.separation}>{value}</span>
             })}
           </Typography>
-          <Box display='flex' justifyContent='center' alignItems='center'>
+          <Box display='flex' justifycontent='center' alignitems='center'>
             <Typography variant='h5' component='div'>
               {parole.titre} <small>({parole?.annee})</small>
             </Typography>
@@ -199,13 +199,13 @@ export default function Teks({parole}) {
           <DiferansDialog difference={parole.difference} />
         )}
       </Box>
-      <Grid container justifyContent='center' spacing={1}>
+      <Grid container justifycontent='center' spacing={1}>
         <Grid size={{xs: 12, md: langArray.length > 0 ? 6 : null}}>
           <Box className={classes.gridText}>
             <Typography align='center' sx={{marginBottom: '0.5em'}} variant='h4'>
               Transcription
             </Typography>
-            <Typography paragraph align={alignTeks(langArray, isMobile)} component='span'>
+            <Typography paragraph='true' align={alignTeks(langArray, isMobile)} component='span'>
               {formatJsonString(parole.transcription)}
             </Typography>
           </Box>
@@ -240,7 +240,7 @@ export default function Teks({parole}) {
                   </span>
                 )} {title}
               </Typography>
-              <Typography paragraph align='justify' component='span'>
+              <Typography paragraph='true' align='justify' component='span'>
                 {formatJsonString(lang)}
               </Typography>
             </Box>