{"id":5974,"date":"2024-10-05T09:25:04","date_gmt":"2024-10-05T09:25:04","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/appliquer-style-global-sans-transformation-react\/"},"modified":"2024-10-05T09:25:08","modified_gmt":"2024-10-05T09:25:08","slug":"appliquer-style-global-sans-transformation-react","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/appliquer-style-global-sans-transformation-react\/","title":{"rendered":"7.5 Appliquer un Style Global sans Transformation en React"},"content":{"rendered":"\u00ab\u00a0`html\n\n<p><strong>Style Global sans Transformation React<\/strong> est une technique utile pour unifier l&rsquo;apparence de votre application sans avoir besoin de conteneurs ou transformations CSS suppl\u00e9mentaires. En ma\u00eetrisant cette approche, vous pouvez am\u00e9liorer la gestion de l&rsquo;apparence de votre application React pour qu&rsquo;elle soit plus coh\u00e9rente et maintenable. D\u00e9couvrons comment impl\u00e9menter efficacement cette strat\u00e9gie gr\u00e2ce \u00e0 des exemples pratiques.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 l&rsquo;Application des Styles Globaux en React<\/h2>\n\n\n\n<div id=\"videoContainer\" style=\"position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; background: #000;\">\n  <iframe src=\"https:\/\/player.vimeo.com\/video\/706087890?dnt=1&#038;fullscreen=0&#038;pip=0\" loading=\"lazy\" loading=\"lazy\" style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%;\" frameborder=\"0\" allow=\"autoplay\" allowfullscreen id=\"vimeoPlayer\"><\/iframe>\n  \n  <!-- Popup Desktop -->\n  <div id=\"popupContainer\" class=\"desktop-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 400px; padding: 20px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n    <h2 style=\"color: #333; font-size: 1.5em; margin: 10px 0;\" id=\"profitez-de-loffre-spciale-\">Profitez de l\u2019offre sp\u00e9ciale !<\/h2>\n    <p style=\"color: #e74c3c; font-size: 1.2em; margin: 10px 0;\">Obtenez notre cours pour seulement <strong id=\"price\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n    <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/cr%C3%A9er-des-sites-interactifs-avec-react-et-redux\/143\" target=\"_blank\" style=\"display: block; padding: 10px 20px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 1em; margin: 20px auto;\" rel=\"noopener\">Commencer maintenant<\/a>\n    <button onclick=\"closePopup()\" style=\"padding: 10px 20px; font-size: 1em;\">Fermer<\/button>\n  <\/div>\n\n  <!-- Popup Mobile -->\n  <div id=\"popupContainerMobile\" class=\"mobile-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; max-width: 300px; padding: 15px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n    <p style=\"color: #e74c3c; font-size: 1em; margin: 5px 0;\">Cours sp\u00e9cial \u00e0 <strong id=\"priceMobile\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n    <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/cr%C3%A9er-des-sites-interactifs-avec-react-et-redux\/143\" target=\"_blank\" style=\"display: inline-block; padding: 8px 15px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 0.9em;\" rel=\"noopener\">Commencer maintenant<\/a>\n    <button onclick=\"closePopup()\" style=\"padding: 5px 10px; font-size: 0.9em;\">Fermer<\/button>\n  <\/div>\n<\/div>\n\n<script src=\"https:\/\/player.vimeo.com\/api\/player.js\"><\/script>\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n    var iframe = document.getElementById('vimeoPlayer');\n    var player = new Vimeo.Player(iframe);\n    var isPopupDisplayed = false;\n\n    player.on('play', function() {\n        if (!isPopupDisplayed) {\n            player.on('timeupdate', function(data) {\n                if (data.seconds >= 120 && !isPopupDisplayed) { \/\/ 120 seconds = 2 minutes\n                    \/\/ Pause the video and display the popup\n                    player.pause().then(function() {\n                        if (window.innerWidth > 768) {\n                            document.querySelector('.desktop-popup').style.display = 'block';\n                        } else {\n                            document.querySelector('.mobile-popup').style.display = 'block';\n                        }\n                        fetchPriceAndUpdatePopup();\n                        isPopupDisplayed = true;\n                    });\n                }\n            });\n        }\n    });\n\n    function fetchPriceAndUpdatePopup() {\n        fetch('https:\/\/wikiform.fr\/application\/learnify\/home\/course\/devenir-un-d%C3%A9veloppeur-python\/144')\n            .then(response => response.text())\n            .then(html => {\n                var parser = new DOMParser();\n                var fetchedDoc = parser.parseFromString(html, 'text\/html');\n                var priceElement = fetchedDoc.querySelector('.ammount .fw-500');\n                var originalPriceElement = fetchedDoc.querySelector('.ammount del');\n                var price = priceElement ? priceElement.textContent.trim() : '29.5\u20ac';\n                var originalPrice = originalPriceElement ? originalPriceElement.textContent.trim() : '59\u20ac';\n\n                document.getElementById('price').textContent = price;\n                document.getElementById('priceMobile').textContent = price;\n                document.querySelector('.desktop-popup del').textContent = originalPrice;\n                document.querySelector('.mobile-popup del').textContent = originalPrice;\n            })\n            .catch(error => console.error('Error fetching the price:', error));\n    }\n\n    function closePopup() {\n        document.querySelector('.desktop-popup').style.display = 'none';\n        document.querySelector('.mobile-popup').style.display = 'none';\n        player.play(); \/\/ Allows resuming the video only after closing the popup\n    }\n});\n<\/script>\n\n\n\n<p>Les styles globaux permettent de d\u00e9finir des r\u00e8gles CSS qui s&rsquo;appliquent \u00e0 l&rsquo;ensemble de votre application web, ind\u00e9pendamment de la structure des composants. En utilisant des styles globaux en React, vous pouvez ais\u00e9ment contr\u00f4ler et modifier l&rsquo;apparence de votre application web de mani\u00e8re centralis\u00e9e. Pour en savoir plus sur les diff\u00e9rences entre applications single page et multi-page en React, cliquez <a href=\"https:\/\/wikiform.fr\/codespace\/differences-single-page-multi-page-react\">ici<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Pourquoi Utiliser des Styles Globaux en React ?<\/h3>\n\n\n\n<p>Utiliser des styles globaux en React est avantageux notamment pour assurer la coh\u00e9rence visuelle \u00e0 travers tous les composants de l&rsquo;application. Cela permet de r\u00e9duire la duplication de code CSS et d&rsquo;assurer que des \u00e9l\u00e9ments tels que les typographies, les couleurs et les espacements sont uniformes dans toute l&rsquo;application. Vous pouvez \u00e9galement en apprendre davantage sur l&rsquo;utilit\u00e9 des composants par classe et fonction en React <a href=\"https:\/\/wikiform.fr\/codespace\/composants-par-classe-vs-fonction-react-differences\">ici<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Comment Int\u00e9grer des Styles Globaux<\/h3>\n\n\n\n<p>Pour int\u00e9grer des styles globaux dans une application React, vous pouvez utiliser diff\u00e9rents outils et techniques. Parmi les solutions les plus populaires, il y a l&rsquo;application de feuilles de style classiques, l&rsquo;utilisation de librairies comme <code>styled-components<\/code>, ou encore <code>emotion<\/code>, qui offrent un support pour les styles au niveau global. Vous pouvez explorer davantage l&rsquo;int\u00e9gration des modules CSS <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-qu-un-module-css-utiliser-react\">ici<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>\/* styles\/global.css *\/\nbody {\n  margin: 0;\n  font-family: 'Roboto', sans-serif;\n  background-color: #f0f0f0;\n  color: #333;\n}\n\nh1, h2, h3, h4, h5, h6 {\n  font-weight: bold;\n  color: #444;\n}\n\na {\n  color: #0066cc;\n  text-decoration: none;\n}\n\na:hover {\n  text-decoration: underline;\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Int\u00e9grer des Styles Globaux avec un Cadre CSS-in-JS<\/h3>\n\n\n\n<p>L&rsquo;utilisation d&rsquo;un cadre CSS-in-JS permet de b\u00e9n\u00e9ficier des styles globaux tout en gardant les avantages du CSS scoping sp\u00e9cifique \u00e0 React. Par exemple, avec <code>styled-components<\/code>, vous pouvez d\u00e9finir des styles globaux via le composant <code>createGlobalStyle<\/code>. Pour d\u00e9couvrir d&rsquo;autres m\u00e9thodes pour modifier dynamiquement le style, visitez <a href=\"https:\/\/wikiform.fr\/codespace\/modifier-du-styled-components-react\">ce lien<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-jsx\"><code>\/\/ GlobalStyles.js\nimport { createGlobalStyle } from 'styled-components';\n\nconst GlobalStyle = createGlobalStyle`\n  body {\n    margin: 0;\n    font-family: 'Roboto', sans-serif;\n    background-color: #f0f0f0;\n    color: #333;\n  }\n\n  h1, h2, h3, h4, h5, h6 {\n    font-weight: bold;\n    color: #444;\n  }\n\n  a {\n    color: #0066cc;\n    text-decoration: none;\n  }\n\n  a:hover {\n    text-decoration: underline;\n  }\n`;\n\nexport default GlobalStyle;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Appliquer des Styles via Emotion<\/h3>\n\n\n\n<p>Emotion offre une alternative similaire avec son API <code>Global<\/code>. Ce cadre permet d&rsquo;appliquer des styles globaux directement dans un contexte JSX, ce qui est extr\u00eamement pratique lors de la gestion des \u00e9tats de styles globalis\u00e9s. Pour en savoir plus sur l&rsquo;utilisation des props en React, veuillez lire <a href=\"https:\/\/wikiform.fr\/codespace\/a-la-decouverte-des-props-react-guide\">cet article<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-jsx\"><code>\/\/ GlobalStyles.js\n\/** @jsxImportSource @emotion\/react *\/\nimport { Global, css } from '@emotion\/react';\n\nconst GlobalStyles = () => (\n  <Global\n    styles={css`\n      body {\n        margin: 0;\n        font-family: 'Roboto', sans-serif;\n        background-color: #f0f0f0;\n        color: #333;\n      }\n\n      h1, h2, h3, h4, h5, h6 {\n        font-weight: bold;\n        color: #444;\n      }\n\n      a {\n        color: #0066cc;\n        text-decoration: none;\n      }\n\n      a:hover {\n        text-decoration: underline;\n      }\n    `}\n  \/>\n);\n\nexport default GlobalStyles;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utilisation Pratique et Ses Impacts<\/h3>\n\n\n\n<p>En impl\u00e9mentant des styles globaux \u00e0 l&rsquo;aide de CSS-in-JS comme Emotion ou <code>styled-components<\/code>, vous gardez le contr\u00f4le total sur les propri\u00e9t\u00e9s globales de votre application. Cela garantit une totale coh\u00e9rence visuelle et simplifie la gestion des th\u00e8mes ou des modifications \u00e0 grande \u00e9chelle. D\u00e9couvrir comment int\u00e9grer des composants React avec des API <a href=\"https:\/\/wikiform.fr\/codespace\/utiliser-refs-react-tutoriel\">ici<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Appliquer des styles globaux sans transformation en React offre une mani\u00e8re fiable et efficace de g\u00e9rer l&rsquo;apparence globale de votre application. Que vous utilisiez des feuilles de style classiques ou des biblioth\u00e8ques modernes de CSS-in-JS, comprendre ces concepts vous \u00e9quipera pour cr\u00e9er des interfaces unifi\u00e9es et visuellement coh\u00e9rentes. Pour explorer davantage les meilleures pratiques de style en React, n&rsquo;h\u00e9sitez pas \u00e0 consulter d&rsquo;autres ressources ou articles sur l&rsquo;int\u00e9gration des th\u00e8mes et des syst\u00e8mes de design. Cherchez \u00e9galement \u00e0 utiliser <a href=\"https:\/\/wikiform.fr\/codespace\/ajouter-nouveau-composant-react\">de nouveaux composants React<\/a> pour am\u00e9liorer vos applications.<\/p>\n\n\n\n<div>\n  <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/cr%C3%A9er-des-sites-interactifs-avec-react-et-redux\/143\" target=\"_blank\" rel=\"noopener\">\n    <img decoding=\"async\" src=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-REDUX-ET-REACT-offre-50.gif\" loading=\"lazy\" alt=\"Learnify Redux &#038; React\" style=\"max-width: 100%; height: auto;\" title=\"\">\n  <\/a>\n<\/div>\n\n\u00ab\u00a0`","protected":false},"excerpt":{"rendered":"<p>\u00ab\u00a0`html Style Global sans Transformation React est une technique utile pour unifier l&rsquo;apparence de votre application sans avoir besoin de conteneurs ou transformations CSS suppl\u00e9mentaires&#8230;.<\/p>\n","protected":false},"author":2,"featured_media":3169,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[23],"tags":[18],"class_list":["post-5974","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react-et-redux","tag-tutoriels"],"acf":[],"_titre_de_la_formation":null,"_description_":null,"_objectifs_pedagogiques":null,"_programme_":null,"_url_de_limage":null,"_materiel_necessaire":null,"_modalites_devaluation_des_acquis":null,"_moyens_pedagogiques_et_techniques":null,"_accessibilite_":null,"_formateur_":null,"menu_order":0,"_links":{"self":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5974","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/comments?post=5974"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5974\/revisions"}],"predecessor-version":[{"id":5975,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5974\/revisions\/5975"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/3169"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5974"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5974"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5974"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}