{"id":73775,"date":"2023-10-16T19:28:22","date_gmt":"2023-10-16T18:28:22","guid":{"rendered":"https:\/\/kinsta.com\/fr\/?p=73775&#038;post_type=knowledgebase&#038;preview_id=73775"},"modified":"2025-10-01T20:42:28","modified_gmt":"2025-10-01T19:42:28","slug":"react-jss","status":"publish","type":"post","link":"https:\/\/kinsta.com\/fr\/blog\/react-jss\/","title":{"rendered":"Donnez du style \u00e0 votre site web React avec JSS"},"content":{"rendered":"<p>Le style vous permet de d\u00e9finir l&rsquo;aspect de votre site web et de cr\u00e9er une marque coh\u00e9rente et esth\u00e9tique. Bien que plusieurs approches utilisent les feuilles de style en cascade (Cascading Style Sheet ou CSS) pour styliser les pages web, les solutions <a href=\"https:\/\/kinsta.com\/fr\/blog\/qu-est-javascript\/\">bas\u00e9es sur JavaScript<\/a> sont plus flexibles et vous donnent plus de contr\u00f4le que les feuilles de style en cascade standard.<\/p>\n<p>L&rsquo;une des m\u00e9thodes les plus r\u00e9pandues consiste \u00e0 utiliser les feuilles de style JavaScript (JSS), qui vous permettent d&rsquo;\u00e9crire des styles CSS en JavaScript. Les JSS pr\u00e9sentent plusieurs avantages, notamment l&rsquo;utilisation de variables, d&rsquo;expressions JavaScript et de fonctions pour cr\u00e9er des styles et des th\u00e8mes dynamiques.<\/p>\n<p>Cet article explique le fonctionnement de JSS, ses avantages et la mani\u00e8re de l&rsquo;utiliser dans vos applications JavaScript. Il aborde \u00e9galement la question des styles dynamiques, des th\u00e8mes et de l&rsquo;optimisation des performances. Vous pouvez utiliser JSS avec de nombreux types d&rsquo;applications, mais dans cet article, nous nous concentrerons sur JSS pour React.<\/p>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<h2>Qu&rsquo;est-ce que JSS ?<\/h2>\n<p>Avec JSS, vous pouvez \u00e9crire des styles CSS sous forme d&rsquo;objets JavaScript et utiliser ces objets comme noms de classe dans des \u00e9l\u00e9ments ou des composants. JSS est agnostique au niveau du framework, vous pouvez donc l&rsquo;utiliser en JavaScript vanille ou avec des frameworks comme <a href=\"https:\/\/kinsta.com\/fr\/blog\/javascript-react\/\">React<\/a> et <a href=\"https:\/\/kinsta.com\/fr\/blog\/bibliotheques-composants-angular\/\">Angular<\/a>.<\/p>\n<p>JSS pr\u00e9sente plusieurs avantages par rapport au style CSS traditionnel :<\/p>\n<ul>\n<li><strong>Style dynamique <\/strong>&#8211; Avec JSS, vous pouvez manipuler les styles en fonction des interactions de l&rsquo;utilisateur ou de valeurs telles que les accessoires ou le contexte. Les fonctions JavaScript vous aident \u00e0 g\u00e9n\u00e9rer dynamiquement des styles dans le navigateur en fonction de l&rsquo;\u00e9tat de l&rsquo;application, des donn\u00e9es externes ou des API du navigateur.<\/li>\n<\/ul>\n<ul>\n<li><strong>Capacit\u00e9s de th\u00e9matisation am\u00e9lior\u00e9es <\/strong>&#8211; Vous pouvez cr\u00e9er des styles sp\u00e9cifiques \u00e0 un th\u00e8me particulier \u00e0 l&rsquo;aide de JSS. Par exemple, vous pouvez cr\u00e9er des styles pour un th\u00e8me clair et un th\u00e8me fonc\u00e9, puis appliquer ces styles sp\u00e9cifiques \u00e0 un th\u00e8me \u00e0 l&rsquo;ensemble de l&rsquo;application en fonction des pr\u00e9f\u00e9rences de l&rsquo;utilisateur. Si vous utilisez React, le paquet <a href=\"https:\/\/github.com\/cssinjs\/jss\/tree\/master\/packages\/react-jss\" target=\"_blank\" rel=\"noopener noreferrer\">React-JSS<\/a> prend en charge la propagation de th\u00e8mes bas\u00e9e sur le contexte. Vous pouvez d\u00e9finir et g\u00e9rer le th\u00e8me en un seul endroit avant de transmettre les informations relatives au th\u00e8me dans l&rsquo;arborescence des composants \u00e0 l&rsquo;aide d&rsquo;un fournisseur de th\u00e8me.<\/li>\n<\/ul>\n<ul>\n<li><strong>Am\u00e9lioration de la maintenabilit\u00e9 <\/strong>&#8211; En d\u00e9finissant les styles dans des objets JavaScript, vous pouvez regrouper les styles similaires en un seul endroit et les importer dans votre application en cas de besoin. Cette approche r\u00e9duit la duplication du code et am\u00e9liore l&rsquo;organisation du code, ce qui facilite la maintenance des styles au fil du temps.<\/li>\n<\/ul>\n<ul>\n<li><strong>CSS r\u00e9el <\/strong>&#8211; JSS g\u00e9n\u00e8re du CSS r\u00e9el plut\u00f4t que des styles en ligne qui peuvent \u00eatre d\u00e9sordonn\u00e9s et difficiles \u00e0 g\u00e9rer. JSS utilise par d\u00e9faut des noms de classe uniques, ce qui vous permet d&rsquo;\u00e9viter les collisions de noms caus\u00e9es par la nature globale de CSS.<\/li>\n<\/ul>\n<h2>Comment \u00e9crire des styles avec JSS<\/h2>\n<p>Cet article est bas\u00e9 sur un projet React. Il utilise le paquetage <code>react-jss<\/code>, qui int\u00e8gre JSS \u00e0 React \u00e0 l&rsquo;aide de l&rsquo;API <code>Hooks<\/code>. <code>react-jss<\/code> est livr\u00e9 avec les extensions par d\u00e9faut et vous permet d&rsquo;utiliser JSS avec une configuration minimale.<\/p>\n<h3>Syntaxe de base et utilisation de JSS dans React<\/h3>\n<p>Pour utiliser JSS dans React, commencez par installer le paquet <code>react-jss<\/code> \u00e0 l&rsquo;aide d&rsquo;un gestionnaire de paquets tel que npm ou Yarn.<\/p>\n<p>La syntaxe d&rsquo;\u00e9criture des styles dans JSS consiste \u00e0 d\u00e9finir des r\u00e8gles CSS pour des \u00e9l\u00e9ments sp\u00e9cifiques au sein d&rsquo;un objet <a href=\"https:\/\/kinsta.com\/javascript\/\">JavaScript<\/a>. Par exemple, le code suivant d\u00e9finit les styles d&rsquo;un bouton dans une application React.<\/p>\n<pre><code class=\"language-js\">\nconst styles = {\n      button: {\n            padding: \"10px 20px\",\n            background: \"#f7df1e\",\n            textAlign: \"center\",\n            border:\"none\"\n      }\n};<\/code><\/pre>\n<p><strong>Remarque : <\/strong>les propri\u00e9t\u00e9s CSS sont en majuscules.<\/p>\n<p>Pour appliquer ces styles \u00e0 un \u00e9l\u00e9ment HTML :<\/p>\n<ol start=\"1\">\n<li>G\u00e9n\u00e9rez les classes en passant les styles <code>createUseStyles()<\/code> \u00e0 la m\u00e9thode de <code>react-jss<\/code>:<\/li>\n<\/ol>\n<pre><code class=\"language-js\">import { createUseStyles } from \"react-jss\";\nconst styles = {\n       button: {\n             padding: \"10px 20px\",\n             background: \"#f7df1e\",\n             textAlign: \"center\",\n             border:\"none\"\n       }\n};\nconst useStyles = createUseStyles(styles);<\/code><\/pre>\n<ol start=\"2\">\n<li>Appliquez le CSS \u00e0 l&rsquo;\u00e9l\u00e9ment bouton en utilisant le nom de la classe g\u00e9n\u00e9r\u00e9e :<\/li>\n<\/ol>\n<pre><code class=\"language-js\">const App = () = &gt; {\n      const classes = useStyles();\n      return (\n            &lt; button className={classes.button} &gt; &lt;\/button &gt;\n      );\n};<\/code><\/pre>\n<p>Ce code cr\u00e9e un composant React et applique les styles dans l&rsquo;objet <code>styles<\/code>.<\/p>\n<h3>Comment g\u00e9rer les pseudo-classes, les requ\u00eates de m\u00e9dias et les images cl\u00e9s ?<\/h3>\n<p>JSS prend en charge toutes les fonctionnalit\u00e9s CSS existantes, y compris les pseudo-classes, les requ\u00eates de m\u00e9dia et les images cl\u00e9s. Utilisez la m\u00eame syntaxe que les r\u00e8gles de style CSS ordinaires pour d\u00e9finir les styles de ces fonctions.<\/p>\n<h4>Pseudo-classes<\/h4>\n<p>Supposons, par exemple, que vous souhaitiez ajouter une pseudo-classe de survol au bouton pour modifier la couleur d&rsquo;arri\u00e8re-plan lorsque l&rsquo;utilisateur passe la souris dessus. Le code suivant met en \u0153uvre cette pseudo-classe pour que l&rsquo;arri\u00e8re-plan du bouton devienne vert clair au survol :<\/p>\n<pre><code class=\"language-js\">const styles = {\n      button: {\n            padding: \"10px 20px\",\n            background: \"#f7df1e\",\n            textAlign: \"center\",\n            border:\"none\",\n            '&:hover': {\n                  backgroundColor: 'lightgreen',\n            }\n     }\n};<\/code><\/pre>\n<h4>Images cl\u00e9s<\/h4>\n<p>De m\u00eame, vous pouvez appliquer une animation par image cl\u00e9 \u00e0 un composant \u00e0 l&rsquo;aide de la r\u00e8gle <code>@keyframes<\/code>. Par exemple, vous trouverez ci-dessous un objet de style pour un composant en rotation.<\/p>\n<pre><code class=\"language-js\">const styles = {\n       '@keyframes spin': {\n             '0%': {\n                   transform: 'rotate(0deg)',\n             },\n             '100%': {\n                   transform: 'rotate(360deg)',\n             },\n       },\n       spinner: {\n              width: \"100px\",\n              height: \"100px\",\n              backgroundColor: \"lightgreen\",\n              animation: '$spin 1s linear infinite',\n       },\n}<\/code><\/pre>\n<p>Dans la fonction Styles, vous avez d\u00e9fini une animation d&rsquo;image cl\u00e9 nomm\u00e9e <code>spin<\/code> \u00e0 l&rsquo;aide de la r\u00e8gle <code>@keyframes<\/code>. Ensuite, vous cr\u00e9ez une classe appel\u00e9e <code>spinner<\/code> qui applique l&rsquo;animation en utilisant la syntaxe <code>$<\/code> pour r\u00e9f\u00e9rencer l&rsquo;animation d&rsquo;image cl\u00e9.<\/p>\n<h4>Requ\u00eates de m\u00e9dias<\/h4>\n<p>Les <a href=\"https:\/\/kinsta.com\/fr\/blog\/media-query-javascript\/\">requ\u00eates de m\u00e9dia<\/a> utilisent \u00e9galement la syntaxe CSS habituelle dans JSS. Par exemple, pour modifier la taille de la police d&rsquo;un bouton \u00e0 une taille d&rsquo;\u00e9cran sp\u00e9cifique, utilisez les styles suivants :<\/p>\n<pre><code class=\"language-js\">const styles = {\n      button: {\n            fontSize: \"12px\",\n            '@media (max-width: 768px)': {\n                  fontSize: '34px',\n            },\n      }\n};<\/code><\/pre>\n<p>Comme vous venez de le voir, l&rsquo;\u00e9criture de styles en JSS n&rsquo;est pas tr\u00e8s diff\u00e9rente de l&rsquo;\u00e9criture d&rsquo;un simple CSS. Cependant, son avantage est que vous pouvez exploiter la puissance de JavaScript pour rendre vos styles dynamiques.<\/p>\n<h2>Style dynamique avec JSS<\/h2>\n<p>Le style dynamique consiste \u00e0 cr\u00e9er des styles qui changent en r\u00e9ponse \u00e0 des conditions sp\u00e9cifiques. Dans React, les styles peuvent changer en fonction de valeurs telles que l&rsquo;\u00e9tat, les accessoires et le contexte du composant.<\/p>\n<h3>Comment cr\u00e9er des styles dynamiques avec JSS<\/h3>\n<p>Dans JSS, vous pouvez appliquer conditionnellement des styles \u00e0 vos \u00e9l\u00e9ments avec des expressions JavaScript pour cr\u00e9er des r\u00e8gles de style dynamiques.<\/p>\n<p>Supposons que vous ayez un bouton qui re\u00e7oit une propri\u00e9t\u00e9 appel\u00e9e <code>bgColor<\/code>. Sa valeur est la couleur d&rsquo;arri\u00e8re-plan du bouton. Pour cr\u00e9er une r\u00e8gle de style qui modifie la couleur d&rsquo;arri\u00e8re-plan du bouton en fonction de la propri\u00e9t\u00e9, transmettez les propri\u00e9t\u00e9s \u00e0 la m\u00e9thode <code>useStyles<\/code>.<\/p>\n<pre><code class=\"language-js\">import { createUseStyles } from \"react-jss\"\n\nconst styles = {\n      button: {\n            padding: \"10px 20px\",\n            background: props = &gt;props.bgColor,\n            textAlign: \"center\",\n            border:\"none\"\n      }\n};\nconst Button = ({...props}) =&gt; {\n  \n      const useStyles = createUseStyles(styles);\n      const classes = useStyles({...props});\n      return (\n            &lt;button className={classes.button}&gt;Button &lt;\/button&gt;\n      );\n};<\/code><\/pre>\n<p>Vous pouvez ensuite r\u00e9f\u00e9rencer les accessoires dans l&rsquo;objet Styles. L&rsquo;exemple ci-dessus fait r\u00e9f\u00e9rence \u00e0 <code>props.bgColor<\/code>.<\/p>\n<p>Vous pouvez transmettre la couleur d&rsquo;arri\u00e8re-plan que vous souhaitez lorsque vous effectuez le rendu du composant. Le composant ci-dessous rend deux composants <code>Button<\/code> avec les couleurs d&rsquo;arri\u00e8re-plan <code>lightgreen<\/code> et <code>yellow<\/code>.<\/p>\n<pre><code class=\"language-js\">export default function App() {\n  return (\n    &lt;div &gt;\n      &lt;Button bgColor=\"lightgreen\" \/&gt;\n      &lt;div style={{ marginTop: \"10px\" }}&gt;&lt;\/div&gt;\n      &lt;Button bgColor=\"yellow\" \/&gt;\n    &lt;\/div&gt;\n  );\n}<\/code><\/pre>\n<figure style=\"width: 1838px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/10\/image1.png\" alt=\"Deux boutons stylis\u00e9s dynamiquement avec JSS\" width=\"1838\" height=\"462\"><figcaption class=\"wp-caption-text\">Deux boutons stylis\u00e9s dynamiquement avec JSS<\/figcaption><\/figure>\n<p>Chaque fois que vous rendez le composant <code>Button<\/code>, vous pouvez styliser l&rsquo;arri\u00e8re-plan comme vous le souhaitez.<\/p>\n<p>Vous pouvez \u00e9galement modifier les styles en fonction de l&rsquo;\u00e9tat d&rsquo;un composant. Supposons que vous ayez un menu de navigation avec plusieurs liens. Pour mettre en \u00e9vidence le lien de la page actuelle, d\u00e9finissez une valeur d&rsquo;\u00e9tat appel\u00e9e <code>isActive<\/code> qui d\u00e9termine si un \u00e9l\u00e9ment de lien du menu est actif.<\/p>\n<p>Vous pouvez ensuite utiliser un op\u00e9rateur ternaire JavaScript pour v\u00e9rifier la valeur de <code>isActive<\/code>, en d\u00e9finissant la couleur du lien en bleu si l&rsquo;\u00e9tat est <code>true<\/code> et en rouge si <code>false<\/code>.<\/p>\n<pre><code class=\"language-js\">const styles = {\n      a: {\n             color: ({ isActive }) =&gt; isActive ? 'blue' : 'red',\n             padding: '10px',\n      },\n};<\/code><\/pre>\n<p>D\u00e9sormais, les liens actifs deviennent bleus et les liens inactifs deviennent rouges.<\/p>\n<p>De m\u00eame, vous pouvez cr\u00e9er un style dynamique bas\u00e9 sur le contexte. Vous pouvez styliser un \u00e9l\u00e9ment, comme <code>UserContext<\/code>, en fonction de la valeur d&rsquo;un contexte qui stocke le statut en ligne de l&rsquo;utilisateur.<\/p>\n<pre><code class=\"language-js\">const { online } = useContext(UserContext);\nconst styles = {\n      status: {\n            background: online ? 'lightgreen' : '',\n            width: '20px',\n            height: '20px',\n            borderRadius: \"50%\",\n            display: online ? 'flex' : 'hidden'\n      },\n};<\/code><\/pre>\n<p>Dans cet exemple, l&rsquo;\u00e9l\u00e9ment a un arri\u00e8re-plan vert si l&rsquo;utilisateur est en ligne. Vous d\u00e9finissez la propri\u00e9t\u00e9 <code>display<\/code> \u00e0 <code>flex<\/code> si l&rsquo;utilisateur est en ligne et \u00e0 <code>hidden<\/code> s&rsquo;il est hors ligne.<\/p>\n<h3>Cas d&rsquo;utilisation de la stylisation dynamique<\/h3>\n<p>La stylisation dynamique est une fonctionnalit\u00e9 puissante de JSS qui a de nombreux cas d&rsquo;utilisation :<\/p>\n<ul>\n<li><strong>Cr\u00e9ation de th\u00e8mes<\/strong> &#8211; Vous pouvez d\u00e9finir des styles bas\u00e9s sur un objet th\u00e8me, tel qu&rsquo;un th\u00e8me clair et un th\u00e8me fonc\u00e9, et les transmettre aux composants en tant que valeur prop ou contextuelle.<\/li>\n<li><strong>Rendu conditionnel<\/strong> &#8211; JSS vous permet de d\u00e9finir des styles bas\u00e9s sur des valeurs sp\u00e9cifiques. Vous pouvez cr\u00e9er des styles qui ne s&rsquo;appliquent que dans certaines conditions, par exemple lorsqu&rsquo;un bouton est d\u00e9sactiv\u00e9, qu&rsquo;un champ de texte est dans un \u00e9tat d&rsquo;erreur, qu&rsquo;un menu de navigation lat\u00e9ral est ouvert ou qu&rsquo;un utilisateur est en ligne.<\/li>\n<li><strong>Conception responsive<\/strong> &#8211; Vous pouvez utiliser le style dynamique dans JSS pour modifier le style d&rsquo;un \u00e9l\u00e9ment en fonction de la largeur de la fen\u00eatre de visualisation. Par exemple, vous pouvez d\u00e9finir un ensemble de styles pour un point de rupture sp\u00e9cifique \u00e0 l&rsquo;aide de requ\u00eates multim\u00e9dias et les appliquer de mani\u00e8re conditionnelle en fonction de la taille de l&rsquo;\u00e9cran.<\/li>\n<\/ul>\n<h2>Comment utiliser les th\u00e8mes avec JSS<\/h2>\n<p>Utilisez les th\u00e8mes pour fournir une interface utilisateur coh\u00e9rente dans l&rsquo;ensemble de votre application. Il est facile de cr\u00e9er des th\u00e8mes dans JSS : il suffit de d\u00e9finir un objet th\u00e8me avec des valeurs de style globales, telles que les couleurs, la typographie et l&rsquo;espacement. En voici un exemple :<\/p>\n<pre><code class=\"language-js\">const theme = {\n      colors: {\n            primary: '#007bff',\n            secondary: '#6c757d',\n            light: '#f8f9fa',\n            dark: '#343a40',\n       },\n       typography: {\n             fontFamily: 'Helvetica, Arial, sans-serif',\n             fontSize: '16px',\n             fontWeight: 'normal',\n       },\n       spacing: {\n             small: '16px',\n             medium: '24px',\n             large: '32px',\n       },\n};<\/code><\/pre>\n<p>Pour appliquer des th\u00e8mes \u00e0 vos composants, utilisez des fournisseurs de contexte. La biblioth\u00e8que JSS fournit un composant <code>ThemeProvider<\/code> que vous pouvez envelopper autour des composants qui ont besoin d&rsquo;acc\u00e9der au th\u00e8me.<\/p>\n<p>Dans l&rsquo;exemple suivant, le composant <code>Button<\/code> est envelopp\u00e9 dans le composant <code>ThemeProvider<\/code> et l&rsquo;objet <code>theme<\/code> lui est transmis en tant que propri\u00e9t\u00e9.<\/p>\n<pre><code class=\"language-js\">import { ThemeProvider } from \"react-jss\";\nconst App = () =&gt; (\n      &lt;ThemeProvider theme={theme}&gt;\n            &lt;Button \/&gt;\n      &lt;\/ThemeProvider&gt;\n)<\/code><\/pre>\n<p>Vous pouvez acc\u00e9der au th\u00e8me dans le composant <code>Button<\/code> \u00e0 l&rsquo;aide d&rsquo;un crochet <code>useTheme()<\/code> et le transmettre \u00e0 l&rsquo;objet <code>useStyles<\/code>. L&rsquo;exemple ci-dessous utilise les styles d\u00e9finis dans l&rsquo;objet theme pour cr\u00e9er un bouton primaire.<\/p>\n<pre><code class=\"language-js\">import { useTheme } from \u201creact-jss\u201d\n\nconst useStyles = createUseStyles({\n  primaryButton: {\n    background: ({ theme }) =&gt; theme.colors.primary,\n    font: ({ theme }) =&gt; theme.typography.fontFamily,\n    fontSize: ({ theme }) =&gt; theme.typography.fontSize,\n    padding: ({ theme }) =&gt; theme.spacing.medium\n  }\n});\n\nconst Button = () =&gt; {\n      const theme = useTheme()\n      const classes = useStyles({theme})\n      return (\n            &lt;div&gt;\n              &lt;button className={classes.primaryButton}&gt; Primary Button &lt;\/button&gt;\n            &lt;\/div&gt;\n\n      )\n}<\/code><\/pre>\n<p>Le bouton doit ressembler \u00e0 l&rsquo;image ci-dessous, avec un texte noir sur un bouton rectangulaire bleu.<\/p>\n<figure style=\"width: 1823px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/10\/image3.png\" alt=\"Style d'un bouton primaire bas\u00e9 sur le th\u00e8me.\" width=\"1823\" height=\"194\"><figcaption class=\"wp-caption-text\">Style d&rsquo;un bouton primaire bas\u00e9 sur le th\u00e8me.<\/figcaption><\/figure>\n<p>Si vous modifiez l&rsquo;une des valeurs de l&rsquo;objet th\u00e8me, cela d\u00e9clenchera automatiquement l&rsquo;application de nouveaux styles \u00e0 tous les composants envelopp\u00e9s par le composant <code>ThemeProvider<\/code>. Si vous changez la valeur de la couleur primaire en <code>lightgreen<\/code>, la couleur du bouton devient \u00e9galement vert clair, comme dans l&rsquo;image ci-dessous.<\/p>\n<figure style=\"width: 1744px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/10\/image2.png\" alt=\"La couleur primaire d'un bouton s'adapte au th\u00e8me.\" width=\"1744\" height=\"191\"><figcaption class=\"wp-caption-text\">La couleur primaire d&rsquo;un bouton s&rsquo;adapte au th\u00e8me.<\/figcaption><\/figure>\n<p>Voici quelques r\u00e8gles \u00e0 suivre lors de la cr\u00e9ation de th\u00e8mes :<\/p>\n<ul>\n<li>D\u00e9finissez l&rsquo;objet th\u00e8me dans un fichier distinct pour que le code soit organis\u00e9 et facile \u00e0 maintenir.<\/li>\n<li>Utilisez des noms descriptifs pour les valeurs de style afin de faciliter la lecture et la mise \u00e0 jour de l&rsquo;objet th\u00e8me.<\/li>\n<li>Utilisez des variables CSS pour d\u00e9finir les valeurs que vous utilisez souvent dans votre CSS.<\/li>\n<li>Cr\u00e9ez des valeurs par d\u00e9faut pour toutes les propri\u00e9t\u00e9s de style afin de maintenir une conception coh\u00e9rente dans l&rsquo;ensemble de votre application.<\/li>\n<li>Testez minutieusement vos th\u00e8mes pour vous assurer qu&rsquo;ils fonctionnent comme pr\u00e9vu sur tous les appareils et navigateurs.<\/li>\n<\/ul>\n<p>En suivant ces bonnes pratiques, vous cr\u00e9erez un th\u00e8me simple \u00e0 utiliser et facile \u00e0 mettre \u00e0 jour au fur et \u00e0 mesure de l&rsquo;\u00e9volution de votre application.<\/p>\n<h2>Performance et optimisation<\/h2>\n<p>JSS est une solution de style performante. Avec JSS, seuls les styles actuellement utilis\u00e9s \u00e0 l&rsquo;\u00e9cran sont ajout\u00e9s au mod\u00e8le d&rsquo;objet du document (DOM), ce qui r\u00e9duit la taille du DOM et acc\u00e9l\u00e8re le rendu. JSS met \u00e9galement en cache les styles rendus, ce qui signifie que JSS ne compile le CSS qu&rsquo;une seule fois, am\u00e9liorant ainsi encore les performances.<\/p>\n<p>Vous pouvez b\u00e9n\u00e9ficier d&rsquo;optimisations de performances suppl\u00e9mentaires en utilisant le paquetage <a href=\"https:\/\/github.com\/cssinjs\/jss\/tree\/master\/packages\/react-jss\" target=\"_blank\" rel=\"noopener noreferrer\"><code>react-jss<\/code><\/a> au lieu du paquetage <a href=\"https:\/\/github.com\/cssinjs\"><code>JSS<\/code><\/a> core. Par exemple, <code>react-jss<\/code> supprime les feuilles de style lorsque le composant est d\u00e9mont\u00e9. Il g\u00e8re \u00e9galement l&rsquo;extraction CSS critique et n&rsquo;extrait les styles que des composants rendus. C&rsquo;est ainsi que le paquet <code>react-jss<\/code> r\u00e9duit la taille du paquet CSS et am\u00e9liore les temps de chargement.<\/p>\n<p>Pour r\u00e9duire davantage la taille du paquet CSS, utilisez la division de code pour charger uniquement les feuilles de style CSS dont une page ou un composant sp\u00e9cifique a besoin. Une biblioth\u00e8que comme <code>loadable-components<\/code> peut simplifier le fractionnement du code.<\/p>\n<p>JSS vous permet \u00e9galement de g\u00e9n\u00e9rer des feuilles de style CSS c\u00f4t\u00e9 serveur. Vous pouvez regrouper et filtrer le CSS attach\u00e9 \u00e0 l&rsquo;aide de la classe de registre <code>StyleSheet<\/code> de JSS, puis envoyer les composants rendus et la cha\u00eene CSS au client. Apr\u00e8s le lancement de l&rsquo;application, le CSS statique n&rsquo;est plus n\u00e9cessaire et vous pouvez le supprimer, ce qui r\u00e9duit la taille du paquet.<\/p>\n<h2>R\u00e9sum\u00e9<\/h2>\n<p>Vous avez appris les bases de la syntaxe JSS, comment cr\u00e9er et appliquer des objets de style aux composants et comment cr\u00e9er des styles dynamiques. Vous savez \u00e9galement comment utiliser le composant <code>ThemeProvider<\/code> pour appliquer des th\u00e8mes et am\u00e9liorer les performances de JSS. Vous pouvez maintenant utiliser JSS pour cr\u00e9er des styles r\u00e9utilisables, maintenables et dynamiques qui s&rsquo;adaptent \u00e0 diverses conditions.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Le style vous permet de d\u00e9finir l&rsquo;aspect de votre site web et de cr\u00e9er une marque coh\u00e9rente et esth\u00e9tique. Bien que plusieurs approches utilisent les feuilles &#8230;<\/p>\n","protected":false},"author":290,"featured_media":73776,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[1004,980],"class_list":["post-73775","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-react","topic-tutoriel-javascript"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Donnez du style \u00e0 votre site web React avec JSS - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"D\u00e9couvrez le fonctionnement de JSS, ses avantages, comment styliser votre site web React avec JSS et comment l&#039;utiliser dans vos applications JavaScript.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/fr\/blog\/react-jss\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Donnez du style \u00e0 votre site web React avec JSS\" \/>\n<meta property=\"og:description\" content=\"D\u00e9couvrez le fonctionnement de JSS, ses avantages, comment styliser votre site web React avec JSS et comment l&#039;utiliser dans vos applications JavaScript.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/fr\/blog\/react-jss\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstafrance\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-10-16T18:28:22+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-10-01T19:42:28+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/10\/jss.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Marcia Ramos\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"D\u00e9couvrez le fonctionnement de JSS, ses avantages, comment styliser votre site web React avec JSS et comment l&#039;utiliser dans vos applications JavaScript.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/10\/jss.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@kinsta_fr\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_fr\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"Marcia Ramos\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"12 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/react-jss\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/react-jss\/\"},\"author\":{\"name\":\"Marcia Ramos\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/72bff0015d3fb3ba3d8a85494dc0b116\"},\"headline\":\"Donnez du style \u00e0 votre site web React avec JSS\",\"datePublished\":\"2023-10-16T18:28:22+00:00\",\"dateModified\":\"2025-10-01T19:42:28+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/react-jss\/\"},\"wordCount\":2329,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/react-jss\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/10\/jss.jpg\",\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/fr\/blog\/react-jss\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/react-jss\/\",\"url\":\"https:\/\/kinsta.com\/fr\/blog\/react-jss\/\",\"name\":\"Donnez du style \u00e0 votre site web React avec JSS - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/react-jss\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/react-jss\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/10\/jss.jpg\",\"datePublished\":\"2023-10-16T18:28:22+00:00\",\"dateModified\":\"2025-10-01T19:42:28+00:00\",\"description\":\"D\u00e9couvrez le fonctionnement de JSS, ses avantages, comment styliser votre site web React avec JSS et comment l'utiliser dans vos applications JavaScript.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/react-jss\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/fr\/blog\/react-jss\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/react-jss\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/10\/jss.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/10\/jss.jpg\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/react-jss\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/fr\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React\",\"item\":\"https:\/\/kinsta.com\/fr\/sujets\/react\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Donnez du style \u00e0 votre site web React avec JSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/fr\/#website\",\"url\":\"https:\/\/kinsta.com\/fr\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Solutions d&#039;h\u00e9bergement premium, rapides et s\u00e9curis\u00e9es\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/fr\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/fr\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstafrance\/\",\"https:\/\/x.com\/kinsta_fr\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/72bff0015d3fb3ba3d8a85494dc0b116\",\"name\":\"Marcia Ramos\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/0d680db24858fdf61a7e7ce3c1a160f5?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/0d680db24858fdf61a7e7ce3c1a160f5?s=96&d=mm&r=g\",\"caption\":\"Marcia Ramos\"},\"description\":\"I'm the Editorial Team Lead at Kinsta. I'm a open source enthusiast and I love coding. With more than 10 years of technical writing and editing for the tech industry, I love collaborating with people to create clear and concise pieces of content and improve workflows.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/marciadiasramos\/\"],\"honorificSuffix\":\"B.Sc.\",\"gender\":\"Female\",\"knowsLanguage\":[\"English\",\"Portuguese\"],\"jobTitle\":\"Editorial Team Lead\",\"worksFor\":\"Kinsta Inc.\",\"url\":\"https:\/\/kinsta.com\/fr\/blog\/author\/marciaramos\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Donnez du style \u00e0 votre site web React avec JSS - Kinsta\u00ae","description":"D\u00e9couvrez le fonctionnement de JSS, ses avantages, comment styliser votre site web React avec JSS et comment l'utiliser dans vos applications JavaScript.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/fr\/blog\/react-jss\/","og_locale":"fr_FR","og_type":"article","og_title":"Donnez du style \u00e0 votre site web React avec JSS","og_description":"D\u00e9couvrez le fonctionnement de JSS, ses avantages, comment styliser votre site web React avec JSS et comment l'utiliser dans vos applications JavaScript.","og_url":"https:\/\/kinsta.com\/fr\/blog\/react-jss\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstafrance\/","article_published_time":"2023-10-16T18:28:22+00:00","article_modified_time":"2025-10-01T19:42:28+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/10\/jss.jpg","type":"image\/jpeg"}],"author":"Marcia Ramos","twitter_card":"summary_large_image","twitter_description":"D\u00e9couvrez le fonctionnement de JSS, ses avantages, comment styliser votre site web React avec JSS et comment l'utiliser dans vos applications JavaScript.","twitter_image":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/10\/jss.jpg","twitter_creator":"@kinsta_fr","twitter_site":"@kinsta_fr","twitter_misc":{"\u00c9crit par":"Marcia Ramos","Dur\u00e9e de lecture estim\u00e9e":"12 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/fr\/blog\/react-jss\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/fr\/blog\/react-jss\/"},"author":{"name":"Marcia Ramos","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/72bff0015d3fb3ba3d8a85494dc0b116"},"headline":"Donnez du style \u00e0 votre site web React avec JSS","datePublished":"2023-10-16T18:28:22+00:00","dateModified":"2025-10-01T19:42:28+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/fr\/blog\/react-jss\/"},"wordCount":2329,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/fr\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/fr\/blog\/react-jss\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/10\/jss.jpg","inLanguage":"fr-FR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/fr\/blog\/react-jss\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/fr\/blog\/react-jss\/","url":"https:\/\/kinsta.com\/fr\/blog\/react-jss\/","name":"Donnez du style \u00e0 votre site web React avec JSS - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/fr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/fr\/blog\/react-jss\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/fr\/blog\/react-jss\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/10\/jss.jpg","datePublished":"2023-10-16T18:28:22+00:00","dateModified":"2025-10-01T19:42:28+00:00","description":"D\u00e9couvrez le fonctionnement de JSS, ses avantages, comment styliser votre site web React avec JSS et comment l'utiliser dans vos applications JavaScript.","breadcrumb":{"@id":"https:\/\/kinsta.com\/fr\/blog\/react-jss\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/fr\/blog\/react-jss\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/blog\/react-jss\/#primaryimage","url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/10\/jss.jpg","contentUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/10\/jss.jpg","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/fr\/blog\/react-jss\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/fr\/"},{"@type":"ListItem","position":2,"name":"React","item":"https:\/\/kinsta.com\/fr\/sujets\/react\/"},{"@type":"ListItem","position":3,"name":"Donnez du style \u00e0 votre site web React avec JSS"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/fr\/#website","url":"https:\/\/kinsta.com\/fr\/","name":"Kinsta\u00ae","description":"Solutions d&#039;h\u00e9bergement premium, rapides et s\u00e9curis\u00e9es","publisher":{"@id":"https:\/\/kinsta.com\/fr\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/fr\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/fr\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/fr\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstafrance\/","https:\/\/x.com\/kinsta_fr","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/72bff0015d3fb3ba3d8a85494dc0b116","name":"Marcia Ramos","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/0d680db24858fdf61a7e7ce3c1a160f5?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0d680db24858fdf61a7e7ce3c1a160f5?s=96&d=mm&r=g","caption":"Marcia Ramos"},"description":"I'm the Editorial Team Lead at Kinsta. I'm a open source enthusiast and I love coding. With more than 10 years of technical writing and editing for the tech industry, I love collaborating with people to create clear and concise pieces of content and improve workflows.","sameAs":["https:\/\/www.linkedin.com\/in\/marciadiasramos\/"],"honorificSuffix":"B.Sc.","gender":"Female","knowsLanguage":["English","Portuguese"],"jobTitle":"Editorial Team Lead","worksFor":"Kinsta Inc.","url":"https:\/\/kinsta.com\/fr\/blog\/author\/marciaramos\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/73775","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/users\/290"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/comments?post=73775"}],"version-history":[{"count":5,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/73775\/revisions"}],"predecessor-version":[{"id":73889,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/73775\/revisions\/73889"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/73775\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/73775\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/73775\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/73775\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/73775\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/73775\/translations\/jp"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/73775\/translations\/es"},{"href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/73775\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/media\/73776"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/media?parent=73775"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/tags?post=73775"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/topic?post=73775"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}