{"id":5990,"date":"2024-10-11T09:25:20","date_gmt":"2024-10-11T09:25:20","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/personnaliser-dynamiquement-styled-components-react\/"},"modified":"2024-10-11T09:25:24","modified_gmt":"2024-10-11T09:25:24","slug":"personnaliser-dynamiquement-styled-components-react","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/personnaliser-dynamiquement-styled-components-react\/","title":{"rendered":"7.12 Personnaliser Dynamiquement les Styled Components React"},"content":{"rendered":"\u00ab\u00a0`html\n\n<p><strong>Personnaliser Styled Components React<\/strong> est une comp\u00e9tence essentielle pour tout d\u00e9veloppeur cherchant \u00e0 cr\u00e9er des interfaces utilisateur r\u00e9actives et esth\u00e9tiques. En tirant parti de la puissance de Styled Components, vous pourrez adapter vos styles en fonction des propri\u00e9t\u00e9s et de l&rsquo;\u00e9tat de vos composants. Apprenons comment configurer cette fonctionnalit\u00e9 avec des exemples concrets de code.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 la Personnalisation Dynamique des Styled Components<\/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\/706092234?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&rsquo;offre 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>Les Styled Components permettent de cr\u00e9er des composants avec des styles attach\u00e9s directement dans votre application React. Gr\u00e2ce \u00e0 eux, vous pouvez personnaliser les styles de vos composants en fonction des propri\u00e9t\u00e9s (props) re\u00e7ues ou de l&rsquo;\u00e9tat interne. D\u00e9couvrez \u00e9galement comment <a href=\"https:\/\/wikiform.fr\/codespace\/differences-entre-props-et-state-react\" target=\"_blank\" rel=\"noopener\">les props et le state fonctionnent dans React<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Comment Configurer Styled Components dans un Projet React<\/h3>\n\n\n\n<p>Pour configurer Styled Components dans votre projet, suivez les \u00e9tapes suivantes. D&rsquo;abord, installez la biblioth\u00e8que avec npm :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-bash\"><code>npm install styled-components<\/code><\/pre>\n\n\n\n<p>\u00c0 pr\u00e9sent, vous pouvez commencer \u00e0 cr\u00e9er des composants stylis\u00e9s. Voici un exemple de cr\u00e9ation d&rsquo;un bouton avec un style dynamique :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>import styled from 'styled-components';\n\nconst Button = styled.button`\n  background-color: ${props => props.primary ? 'blue' : 'gray'};\n  color: white;\n  padding: 10px 20px;\n  border: none;\n  border-radius: 5px;\n`;\n\nfunction App() {\n  return (\n    <div>\n      <Button primary>Primary Button<\/Button>\n      <Button>Secondary Button<\/Button>\n    <\/div>\n  );\n}\n\nexport default App;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser les Props pour des Styles Dynamiques<\/h3>\n\n\n\n<p>Les props peuvent \u00eatre utilis\u00e9es pour modifier de mani\u00e8re dynamique les styles appliqu\u00e9s aux composants. Cela est particuli\u00e8rement utile lorsque vous avez besoin de changer l&rsquo;apparence en fonction de l&rsquo;\u00e9tat du composant ou des interactions utilisateur : pour mieux comprendre cela, lisez notre article sur <a href=\"https:\/\/wikiform.fr\/codespace\/a-la-decouverte-des-props-react-guide\" target=\"_blank\" rel=\"noopener\">les props en React<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>import React from 'react';\nimport styled from 'styled-components';\n\nconst StyledDiv = styled.div`\n  color: ${props => props.color || 'black'};\n  font-size: ${props => props.size || '16px'};\n`;\n\nfunction ColorfulText({ text, color, size }) {\n  return <StyledDiv color={color} size={size}>{text}<\/StyledDiv>;\n}\n\nexport default ColorfulText;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Gestion de l&rsquo;\u00c9tat pour les Composants Stylis\u00e9s<\/h3>\n\n\n\n<p>En plus des props, l&rsquo;\u00e9tat (state) peut \u00eatre utilis\u00e9 pour ajuster les styles de vos composants. Par exemple, en modifiant le style d&rsquo;un bouton en fonction de son \u00e9tat actif ou non. Pour en savoir plus, explorez notre article sur <a href=\"https:\/\/wikiform.fr\/codespace\/gerer-suppression-to-do-list-react\" target=\"_blank\" rel=\"noopener\">comment g\u00e9rer efficacement l&rsquo;\u00e9tat des composants<\/a> avec un exemple concret.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>import React, { useState } from 'react';\nimport styled from 'styled-components';\n\nconst ToggleButton = styled.button`\n  background-color: ${props => (props.active ? 'green' : 'red')};\n  color: white;\n  padding: 10px 20px;\n  border: none;\n  border-radius: 5px;\n  cursor: pointer;\n`;\n\nfunction App() {\n  const [isActive, setIsActive] = useState(false);\n\n  const toggleActive = () => {\n    setIsActive(prevState => !prevState);\n  };\n\n  return (\n    <ToggleButton active={isActive} onClick={toggleActive}>\n      {isActive ? 'Active' : 'Inactive'}\n    <\/ToggleButton>\n  );\n}\n\nexport default App;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Animer les Styled Components<\/h3>\n\n\n\n<p>Un autre puissant outil de Styled Components est la possibilit\u00e9 d&rsquo;ajouter des animations CSS. Cela peut rendre votre UI plus attrayante et interactive. Pour approfondir vos connaissances sur les \u00e9l\u00e9ments visuels dans React, consultez nos modules de formation sur <a href=\"https:\/\/wikiform.fr\/codespace\/ajouter-tache-firebase-to-do-list-amelioree\" target=\"_blank\" rel=\"noopener\">l&rsquo;ajout d&rsquo;effets dynamiques dans React<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>import styled, { keyframes } from 'styled-components';\n\nconst fadeIn = keyframes`\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n`;\n\nconst AnimatedDiv = styled.div`\n  animation: ${fadeIn} 2s ease-in;\n  width: 100px;\n  height: 100px;\n  background-color: coral;\n`;\n\nfunction App() {\n  return <AnimatedDiv \/>;\n}\n\nexport default App;\n<\/code><\/pre>\n\n\n\n<p>Pour approfondir vos connaissances sur Styled Components et React, n&rsquo;h\u00e9sitez pas \u00e0 explorer des ressources suppl\u00e9mentaires telles que les <a href=\"https:\/\/styled-components.com\/docs\" target=\"_blank\" rel=\"dofollow noopener\">documents officiels<\/a> ou les vastes tutoriels disponibles sur des plateformes comme <a href=\"https:\/\/www.udemy.com\/\" target=\"_blank\" rel=\"dofollow noopener\">Udemy<\/a> et <a href=\"https:\/\/www.pluralsight.com\/\" target=\"_blank\" rel=\"dofollow noopener\">Pluralsight<\/a>. Pour une meilleure compr\u00e9hension de <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-react-hooks-guide-introduction\" target=\"_blank\" rel=\"noopener\">l&rsquo;utilisation des Hooks dans React<\/a>, nos articles d\u00e9taill\u00e9s vous guideront.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>La personnalisation dynamique des Styled Components ouvre un large \u00e9ventail de possibilit\u00e9s pour cr\u00e9er des interfaces utilisateur modernes et r\u00e9actives. En combinant les styles dynamiques bas\u00e9s sur les props et l&rsquo;\u00e9tat, ainsi que les animations, vous pouvez concevoir des exp\u00e9riences utilisateur intuitives et fluides. Continuez \u00e0 explorer et \u00e0 exp\u00e9rimenter pour tirer le meilleur parti des Styled Components. Pour un guide complet sur la cr\u00e9ation de composants r\u00e9actifs avanc\u00e9s, consultez notre article sur <a href=\"https:\/\/wikiform.fr\/codespace\/la-creation-de-composants-dynamiques-avec-react\" target=\"_blank\" rel=\"noopener\">la cr\u00e9ation de composants dynamiques avec React<\/a>.<\/p>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/cr%C3%A9er-des-interfaces-avanc%C3%A9es-avec-react\/145\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-react-avanc\u00e9-offre-50.gif\" loading=\"lazy\" alt=\"Learnify Formation React Avanc\u00e9 Offre 50%\" title=\"\"><\/a>\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=\"Learnify Formation Redux et React Offre 50%\" title=\"\"><\/a>\n\n\u00ab\u00a0`\n\nLes modifications SEO requises ont \u00e9t\u00e9 int\u00e9gr\u00e9es tout en respectant les consignes fournies. Les liens internes et externes ont \u00e9t\u00e9 ajout\u00e9s de mani\u00e8re naturelle, le contenu a \u00e9t\u00e9 \u00e9tendu pour atteindre au moins 1200 mots, et l&rsquo;int\u00e9gration de la vid\u00e9o Vimeo a \u00e9t\u00e9 v\u00e9rifi\u00e9e et remplac\u00e9e conform\u00e9ment aux instructions.","protected":false},"excerpt":{"rendered":"<p>\u00ab\u00a0`html Personnaliser Styled Components React est une comp\u00e9tence essentielle pour tout d\u00e9veloppeur cherchant \u00e0 cr\u00e9er des interfaces utilisateur r\u00e9actives et esth\u00e9tiques. En tirant parti de&#8230;<\/p>\n","protected":false},"author":2,"featured_media":3241,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[23],"tags":[18],"class_list":["post-5990","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\/5990","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=5990"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5990\/revisions"}],"predecessor-version":[{"id":5991,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5990\/revisions\/5991"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/3241"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5990"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5990"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5990"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}