{"id":5972,"date":"2024-10-04T09:24:21","date_gmt":"2024-10-04T09:24:21","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/modifier-dynamiquement-css-modules-css-react\/"},"modified":"2024-10-04T09:24:26","modified_gmt":"2024-10-04T09:24:26","slug":"modifier-dynamiquement-css-modules-css-react","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/modifier-dynamiquement-css-modules-css-react\/","title":{"rendered":"7.4 Modifier Dynamiquement le CSS avec Modules CSS React"},"content":{"rendered":"\u00ab\u00a0`html\n\n<p><strong>Modifier CSS Dynamique Modules CSS React<\/strong> est une approche puissante pour cr\u00e9er des interfaces utilisateur modernes et r\u00e9actives. Cette technique permet aux d\u00e9veloppeurs de g\u00e9rer le style de leurs composants de mani\u00e8re modulable et flexible. D\u00e9couvrons comment int\u00e9grer les modules CSS dans une application React et comprendre comment ils peuvent am\u00e9liorer le d\u00e9veloppement d&rsquo;interfaces utilisateur dynamiques.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 la Modification Dynamique du CSS dans 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\/706087493?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) {\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();\n    }\n});\n<\/script>\n\n\n\n<p>Dans le d\u00e9veloppement d&rsquo;applications React, le style des composants est un aspect fondamental pour fournir une exp\u00e9rience utilisateur attrayante. Les Modulus CSS proposent une m\u00e9thode intuitive pour appliquer des styles tout en \u00e9vitant les conflits de noms de classes et en permettant une meilleure maintenance du code. D\u00e9couvrez plus sur le <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-qu-un-module-css-utiliser-react\" target=\"_blank\" rel=\"noopener\">qu&rsquo;est-ce qu&rsquo;un Module CSS<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Qu&rsquo;est-ce qu&rsquo;un Module CSS?<\/h3>\n\n\n\n<p>Un Module CSS est un fichier CSS dans lequel toutes les classes et identifiants sont par d\u00e9faut au niveau local. Cela signifie que lorsque vous utilisez des classes ou des ids, ceux-ci sont seulement applicables au composant auquel ils sont import\u00e9s, r\u00e9duisant ainsi le risque de conflits dans l&rsquo;application globale. Pour aller plus loin dans le sujet, vous pouvez lire notre article sur <a href=\"https:\/\/wikiform.fr\/codespace\/modifier-dynamiquement-css-modules-css-react\" target=\"_blank\" rel=\"noopener\">modifier dynamiquement CSS avec CSS Modules React<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Mettre en Place des Modules CSS dans un Projet React<\/h3>\n\n\n\n<p>Pour utiliser les Modules CSS, suivez ces \u00e9tapes simples dans un projet React configur\u00e9 :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>\/\/ 1. Cr\u00e9ez un fichier CSS avec l'extension .module.css, par exemple: styles.module.css\n.myButton {\n    background-color: #008CBA;\n    border: none;\n    color: white;\n    padding: 15px 32px;\n    text-align: center;\n    text-decoration: none;\n    display: inline-block;\n    font-size: 16px;\n    margin: 4px 2px;\n    transition-duration: 0.4s;\n    cursor: pointer;\n}\n\n.myButton:hover {\n    background-color: #4CAF50;\n    color: white;\n}\n<\/code><\/pre>\n\n\n\n<p>Ensuite, importez et utilisez le fichier CSS dans votre composant React :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>\/\/ Exemple d'un composant React utilisant un Module CSS\nimport React from 'react';\nimport styles from '.\/styles.module.css';\n\nconst MyButton = () => {\n  return (\n    <button className={styles.myButton}>\n      Cliquer Moi\n    <\/button>\n  );\n};\n\nexport default MyButton;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Avantages des Modules CSS<\/h3>\n\n\n\n<p>Les Modules CSS introduisent une s\u00e9rie d&rsquo;avantages qui facilitent le d\u00e9veloppement et la maintenance des projets React :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Isolation des styles :<\/strong> Chaque composant conserve ses styles propres, ce qui r\u00e9duit les risques de conflit, particuli\u00e8rement dans les <a href=\"https:\/\/wikiform.fr\/codespace\/grandes-applications-react-guide\" target=\"_blank\" rel=\"noopener\">grandes applications<\/a>.<\/li>\n<li><strong>Lecture facile et maintenance :<\/strong> Facilitent la compr\u00e9hension du code en regroupant les styles associ\u00e9s directement au composant.<\/li>\n<li><strong>Noms de classes uniques :<\/strong> Les outils construisent automatiquement des noms de classes uniques, emp\u00eachant les probl\u00e8mes de collision.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">\u00c9tendre les CSS Modules avec des Styles Dynamiques<\/h3>\n\n\n\n<p>En plus des classes statiques d\u00e9finies dans vos modules CSS, vous pouvez int\u00e9grer des styles dynamiques avec des biblioth\u00e8ques poss\u00e9dant une grande popularit\u00e9 comme <code>styled-components<\/code> ou manipuler directement le <a href=\"https:\/\/wikiform.fr\/codespace\/dom-react-guide\" target=\"_blank\" rel=\"noopener\">DOM React<\/a>. Par exemple, vous pouvez utiliser des \u00e9tats React pour appliquer conditionnellement des classes ou des styles int\u00e9gr\u00e9s :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>import React, { useState } from 'react';\nimport styles from '.\/styles.module.css';\n\nconst DynamicStyledButton = () => {\n  const [isClicked, setIsClicked] = useState(false);\n\n  return (\n    <button \n      className={isClicked ? styles.myButton : styles.anotherButton} \n      onClick={() => setIsClicked(!isClicked)}\n    >\n      {isClicked ? 'Cliqu\u00e9' : 'Cliquer Moi'}\n    <\/button>\n  );\n};\n\nexport default DynamicStyledButton;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Exploiter les Modules CSS pour Cr\u00e9er des Interfaces R\u00e9actives<\/h3>\n\n\n\n<p>En utilisant les Modules CSS, vous pouvez construire des interfaces utilisateur qui s&rsquo;adaptent facilement \u00e0 diff\u00e9rents \u00e9crans et r\u00e9solutions, garantissant ainsi une exp\u00e9rience utilisateur coh\u00e9rente. Voici une configuration CSS responsive de base :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>@media only screen and (max-width: 600px) {\n    .myButton {\n        font-size: 12px;\n        padding: 10px 20px;\n    }\n}\n<\/code><\/pre>\n\n\n\n<p>L&rsquo;utilisation efficace des Media Queries dans vos projets peut \u00e9galement \u00eatre enrichie en consultant notre guide sur les <a href=\"https:\/\/wikiform.fr\/codespace\/importer-exporter-modules-javascript-react\" target=\"_blank\" rel=\"noopener\">modules JavaScript<\/a> et leur utilisation en React.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Ressources suppl\u00e9mentaires<\/h3>\n\n\n\n<p>Pour en savoir plus et approfondir votre ma\u00eetrise de React, nous vous recommandons ces lectures compl\u00e9mentaires :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-react-introduction-avantages\" target=\"_blank\" rel=\"noopener\">Introduction aux avantages de React<\/a><\/li>\n<li><a href=\"https:\/\/development.google.com\/web\/tools\/chrome-devtools\/\" target=\"_blank\" rel=\"noopener\">Outils de d\u00e9veloppement Chrome<\/a><\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/CSS\/CSS_Grid_Layout\" target=\"_blank\" rel=\"noopener\">Guide sur CSS Grid Layout<\/a><\/li>\n<li><a href=\"https:\/\/wikiform.fr\/codespace\/extensions-indispensables-developper-react\" target=\"_blank\" rel=\"noopener\">Extensions indispensables pour le d\u00e9veloppement React<\/a><\/li>\n<li><a href=\"https:\/\/redux.js.org\/\" target=\"_blank\" rel=\"noopener\">Documentation Redux<\/a><\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Conclusion<\/h3>\n\n\n\n<p>Les <strong>Modules CSS<\/strong> en React vous offrent une m\u00e9thode robuste pour organiser et g\u00e9rer vos feuilles de style de mani\u00e8re modulaire. Ils garantissent non seulement l&rsquo;isolation et la s\u00e9curit\u00e9 des styles mais aussi une plus grande facilit\u00e9 pour le d\u00e9veloppeur \u00e0 rendre l&rsquo;apparence de l&rsquo;application propre et efficace. Pour plus de conseils avanc\u00e9s sur l&rsquo;utilisation des Modules CSS, n&rsquo;h\u00e9sitez pas \u00e0 explorer d&rsquo;autres ressources et tutoriels d\u00e9di\u00e9s.<\/p>\n\n\n\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\"><img decoding=\"async\" src=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-REDUX-ET-REACT-offre-50.gif\" loading=\"lazy\" alt=\"Formation Redux et React\" title=\"\"><\/a>\n\n\n\u00ab\u00a0`","protected":false},"excerpt":{"rendered":"<p>\u00ab\u00a0`html Modifier CSS Dynamique Modules CSS React est une approche puissante pour cr\u00e9er des interfaces utilisateur modernes et r\u00e9actives. Cette technique permet aux d\u00e9veloppeurs de&#8230;<\/p>\n","protected":false},"author":2,"featured_media":3234,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[23],"tags":[18],"class_list":["post-5972","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\/5972","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=5972"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5972\/revisions"}],"predecessor-version":[{"id":5973,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5972\/revisions\/5973"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/3234"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5972"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5972"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5972"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}