{"id":5986,"date":"2024-10-09T09:24:20","date_gmt":"2024-10-09T09:24:20","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/modifier-css-styled-components-react\/"},"modified":"2024-10-09T09:24:24","modified_gmt":"2024-10-09T09:24:24","slug":"modifier-css-styled-components-react","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/modifier-css-styled-components-react\/","title":{"rendered":"7.10 Modifier le CSS avec Styled Components en React"},"content":{"rendered":"\u00ab\u00a0`html\n\n<p><strong>Modifier CSS Styled Components React<\/strong> est une avanc\u00e9e moderne dans le stylisme d&rsquo;applications React, permettant une gestion des styles plus flexible et modulaire. Gr\u00e2ce aux <strong>Styled Components<\/strong>, vous pouvez \u00e9crire des styles dans vos fichiers JavaScript, ce qui facilite la cr\u00e9ation de composants r\u00e9utilisables et d\u2019interfaces utilisateur coh\u00e9rentes. Voici comment les utiliser efficacement avec des exemples de code concrets.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 <strong>Modifier CSS Styled Components React<\/strong><\/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\/706092097?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><strong>Styled Components<\/strong> est une biblioth\u00e8que qui utilise ES6 et CSS pour cr\u00e9er des composants React styl\u00e9s. Ce syst\u00e8me vous permet d&rsquo;\u00e9crire des CSS qui sont attach\u00e9s directement \u00e0 vos composants React. Chaque composant a son propre style unique qui n&rsquo;impacte pas le reste de l&rsquo;application, ce qui r\u00e9duit les conflits de style et rend le d\u00e9veloppement plus fluide.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Installation et Configuration de Styled Components<\/h3>\n\n\n\n<p>Pour commencer \u00e0 <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-styled-components-utiliser-react\">utiliser les Styled Components<\/a>, vous devez d&rsquo;abord les installer dans votre projet. Vous pouvez les ajouter via npm ou yarn :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-shell\"><code># Avec npm\nnpm install styled-components\n\n# Avec yarn\nyarn add styled-components\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Cr\u00e9er un Composant Styl\u00e9<\/h3>\n\n\n\n<p>Une fois install\u00e9, vous pouvez commencer \u00e0 cr\u00e9er des composants styl\u00e9s. Voici un exemple de cr\u00e9ation d&rsquo;un bouton styl\u00e9 :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import styled from 'styled-components';\n\nconst Button = styled.button`\n  background-color: #4CAF50;\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  cursor: pointer;\n  border-radius: 12px;\n`;\n\nexport default Button;<\/code><\/pre>\n\n\n\n<p>Dans cet exemple, nous avons d\u00e9fini un bouton styl\u00e9 avec une couleur de fond, des bordures arrondies et divers autres styles CSS. Ce bouton peut maintenant \u00eatre utilis\u00e9 comme n&rsquo;importe quel autre composant React. Pour plus d&rsquo;aide sur la cr\u00e9ation de composants, vous pouvez lire notre guide sur <a href=\"https:\/\/wikiform.fr\/codespace\/comment-ajouter-nouveau-composant-react\">comment ajouter un nouveau composant en React<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Utilisation des Props pour un Stylisme Dynamique<\/h3>\n\n\n\n<p>L&rsquo;un des avantages de Styled Components est la possibilit\u00e9 d&rsquo;utiliser des props pour rendre les styles dynamiques. Voici comment :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import React from 'react';\nimport styled from 'styled-components';\n\nconst Button = styled.button`\n  background-color: ${props => props.primary ? '#4CAF50' : '#f4f4f4'};\n  color: ${props => props.primary ? 'white' : '#333'};\n  border: ${props => props.primary ? 'none' : '2px solid #4CAF50'};\n  padding: 15px 32px;\n  font-size: 16px;\n  margin: 4px 2px;\n  cursor: pointer;\n  border-radius: 12px;\n`;\n\nconst App = () => (\n  <div>\n    <Button primary>Primary Button<\/Button>\n    <Button>Secondary Button<\/Button>\n  <\/div>\n);\n\nexport default App;<\/code><\/pre>\n\n\n\n<p>Avec cet exemple, vous pouvez appliquer diff\u00e9rents styles \u00e0 un bouton en changeant simplement sa prop `primary`, ce qui rend vos composants facilement configurables et r\u00e9utilisables. Cette technique est souvent abord\u00e9e dans notre <a href=\"https:\/\/wikiform.fr\/codespace\/composants-par-classe-vs-fonction-react-differences\">guide sur les diff\u00e9rences entre composants par classe et fonction<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Cr\u00e9er des Composants R\u00e9utilisables avec l&rsquo;Imbrication<\/h3>\n\n\n\n<p>Styled Components offre aussi la possibilit\u00e9 d&rsquo;imbrication, permettant de styliser des composants enfants bas\u00e9s sur l&rsquo;\u00e9tat des composants parents :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>const Container = styled.div`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: 2px solid #f0f0f0;\n  padding: 20px;\n  &:hover ${Button} {\n    background-color: #555;\n    color: #fff;\n  }\n`;<\/code><\/pre>\n\n\n\n<p>Ici, on a styl\u00e9 un `Container` de sorte que lorsque l&rsquo;utilisateur survole le conteneur, le `Button` change de couleur. L&rsquo;imbrication facilite la gestion des pseudo-class et des \u00e9tats au sein d&rsquo;un composant. Pour explorer d&rsquo;autres techniques, consultez notre article sur <a href=\"https:\/\/wikiform.fr\/codespace\/modifier-css-styled-components-react\">comment modifier le CSS utilisant Styled Components<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Avantages de l\u2019utilisation de Styled Components dans React<\/h3>\n\n\n\n<p>Les Styled Components offrent de nombreux avantages, notamment l&rsquo;\u00e9limination des conflits de nom de classe, un style sur-mesure pour chaque composant, le fait de garder tout le code d&rsquo;un composant au m\u00eame endroit, et la possibilit\u00e9 de personnaliser les <a href=\"https:\/\/styled-components.com\/docs\" target=\"_blank\" rel=\"noopener\">th\u00e8mes<\/a>. Vous pouvez en apprendre davantage sur pourquoi utiliser cette approche dans notre article <a href=\"https:\/\/wikiform.fr\/codespace\/gerer-dynamiquement-classes-react-guide\">g\u00e9rer dynamiquement les classes avec React<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion sur Modifier CSS Styled Components React<\/h2>\n\n\n\n<p>En int\u00e9grant <strong>Styled Components<\/strong>, vous pouvez augmenter l&rsquo;efficacit\u00e9 de votre d\u00e9veloppement React et cr\u00e9er des interfaces plus harmonieuses et modulaires. Aborder le stylisme avec cette m\u00e9thode r\u00e9duit le chaos des CSS traditionnels et vous permet de b\u00e9n\u00e9ficier d&rsquo;un contr\u00f4le stylistique puissant et dynamique. Pour encore plus d&rsquo;informations sur ce sujet, explorez des <a href=\"https:\/\/styled-components.com\/docs\" target=\"_blank\" rel=\"noopener\">tutoriels d\u00e9taill\u00e9s<\/a> et int\u00e9grez ces techniques avanc\u00e9es dans vos projets actuels. Vous pouvez \u00e9galement d\u00e9couvrir notre guide sur <a href=\"https:\/\/wikiform.fr\/codespace\/creer-premiere-application-react-tutoriel\">comment cr\u00e9er votre premi\u00e8re application React<\/a> pour d\u00e9buter en douceur.<\/p>\n\n\n\n<p><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=\"Learnify Formation Redux et React\" title=\"\"><\/a><\/p>\n\n\u00ab\u00a0`","protected":false},"excerpt":{"rendered":"<p>\u00ab\u00a0`html Modifier CSS Styled Components React est une avanc\u00e9e moderne dans le stylisme d&rsquo;applications React, permettant une gestion des styles plus flexible et modulaire. Gr\u00e2ce&#8230;<\/p>\n","protected":false},"author":2,"featured_media":3230,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[23],"tags":[18],"class_list":["post-5986","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\/5986","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=5986"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5986\/revisions"}],"predecessor-version":[{"id":5987,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5986\/revisions\/5987"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/3230"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5986"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5986"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5986"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}