{"id":5984,"date":"2024-10-08T10:24:13","date_gmt":"2024-10-08T10:24:13","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/utiliser-styled-components-site-react\/"},"modified":"2024-10-08T10:24:17","modified_gmt":"2024-10-08T10:24:17","slug":"utiliser-styled-components-site-react","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/utiliser-styled-components-site-react\/","title":{"rendered":"7.9 Utiliser Styled Components sur son Site React"},"content":{"rendered":"\u00ab\u00a0`html\n\n<p><strong>Styled Components Site React<\/strong> peut transformer la mani\u00e8re dont vous g\u00e9rez le style de vos composants. Gr\u00e2ce \u00e0 Styled Components, vous cr\u00e9ez des composants React directement avec CSS, vous permettant une gestion plus claire et efficace des styles. D\u00e9couvrons ensemble comment utiliser Styled Components avec React \u00e0 travers des exemples pratiques et d\u00e9taill\u00e9s.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 Styled Components Site 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\/706092026?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 permettant de cr\u00e9er des composants React avec des styles encapsul\u00e9s. Elle utilise une technique appel\u00e9e CSS-in-JS, vous permettant d&rsquo;\u00e9crire du CSS directement dans le fichier de votre composant JavaScript. Cette approche am\u00e9liore la modularit\u00e9 et facilite la gestion des styles dans les applications complexes. Pour plus de d\u00e9tails sur <a href=\"https:\/\/wikiform.fr\/codespace\/-qu-est-ce-que-react-introduction-avantages\">l&rsquo;introduction \u00e0 React<\/a>, consultez notre guide.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Installation de Styled Components<\/h3>\n\n\n\n<p>Pour commencer, vous devez ajouter Styled Components \u00e0 votre projet React. Vous pouvez le faire en utilisant npm ou yarn :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-shell\"><code>npm install styled-components\n# ou\nyarn add styled-components\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Cr\u00e9er des Composants avec Styled Components<\/h3>\n\n\n\n<p>Une fois install\u00e9, vous pouvez cr\u00e9er des composants styl\u00e9s en important la m\u00e9thode <code>styled<\/code> de Styled Components et en l&rsquo;utilisant pour d\u00e9finir des styles sp\u00e9cifiques pour vos composants React :<\/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: #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`;\n\nfunction App() {\n  return <Button>Cliquer ici<\/Button>;\n}\n\nexport default App;\n<\/code><\/pre>\n\n\n\n<p>Pour approfondir vos connaissances sur la cr\u00e9ation de composants React, vous pouvez consulter notre article sur <a href=\"https:\/\/wikiform.fr\/codespace\/comment-ajouter-nouveau-composant-react\">comment ajouter un nouveau composant React<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Avantages de Styled Components<\/h3>\n\n\n\n<p>Styled Components offre plusieurs avantages tels que le style dynamique, l&rsquo;autonomie locale des styles, et la suppression des conflits de noms de classes. Pensez \u00e0 des styles dynamiques : ajustez-les selon les props pass\u00e9es au composant :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>const Button = styled.button`\n  background-color: ${props => props.primary ? \"#4CAF50\" : \"white\"};\n  color: ${props => props.primary ? \"white\" : \"black\"};\n`;\n\nfunction App() {\n  return (\n    <div>\n      <Button primary>Primaire<\/Button>\n      <Button>Secondaire<\/Button>\n    <\/div>\n  );\n}\n<\/code><\/pre>\n\n\n\n<p>En explorant les <a href=\"https:\/\/wikiform.fr\/codespace\/nouveautes-javascript-savoir-react\">nouveaut\u00e9s JavaScript<\/a>, vous pouvez \u00e9galement d\u00e9couvrir des astuces pour am\u00e9liorer vos composants React.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Utilisation des Styled Components avec les Th\u00e8mes<\/h3>\n\n\n\n<p>Un autre aspect puissant de Styled Components est sa compatibilit\u00e9 avec le th\u00e9ming. Vous pouvez d\u00e9finir un th\u00e8me global et appliquer les styles correspondants \u00e0 l&rsquo;ensemble de votre application :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>import { ThemeProvider } from 'styled-components';\n\nconst theme = {\n  primaryColor: \"#4CAF50\",\n  textColor: \"white\",\n};\n\nconst Button = styled.button`\n  background-color: ${props => props.theme.primaryColor};\n  color: ${props => props.theme.textColor};\n`;\n\nfunction App() {\n  return (\n    <ThemeProvider theme={theme}>\n      <Button>Bouton th\u00e9matis\u00e9<\/Button>\n    <\/ThemeProvider>\n  );\n}\n<\/code><\/pre>\n\n\n\n<p>Si vous souhaitez en savoir plus sur l&rsquo;int\u00e9gration des th\u00e8mes, n&rsquo;h\u00e9sitez pas \u00e0 consulter notre guide sur <a href=\"https:\/\/wikiform.fr\/codespace\/modifier-dynamiquement-css-modules-css-react\">la modification dynamique des modules CSS<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Retours d&rsquo;Exp\u00e9rience et Bonnes Pratiques<\/h3>\n\n\n\n<p>Apr\u00e8s avoir travaill\u00e9 avec Styled Components, de nombreux d\u00e9veloppeurs ont remarqu\u00e9 une meilleure organisation des styles et une r\u00e9duction des conflits CSS. Pour obtenir de meilleurs r\u00e9sultats, il est conseill\u00e9 de :\n&#8211; Utiliser des th\u00e8mes pour une gestion coh\u00e9rente des styles.\n&#8211; Garder les composants styl\u00e9s petits et sp\u00e9cifiques.\n&#8211; Profiter pleinement des props pour des styles r\u00e9actifs.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Styled Components est un outil puissant pour votre bo\u00eete \u00e0 outils React. En permettant des styles dynamiques et organis\u00e9s, il simplifie le cycle de d\u00e9veloppement et maintien de vos sites web. Pour plus d&rsquo;informations et de tutoriels sur React et Styled Components, explorez des ressources comme <a href=\"https:\/\/styled-components.com\/\" target=\"_blank\" rel=\"noopener\">la documentation officielle de Styled Components<\/a> ou des plateformes telles que <a href=\"https:\/\/www.udemy.com\/\" target=\"_blank\" rel=\"noopener\">Udemy<\/a> qui offrent des cours sp\u00e9cialis\u00e9s. Vous pouvez \u00e9galement consulter notre guide complet sur les <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-styled-components-utiliser-react\">Styled Components<\/a> sur notre site pour des insights plus d\u00e9taill\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=\"Learnify React Redux Formation\" style=\"width:100px;\" title=\"\"><\/a>\n\n\u00ab\u00a0`","protected":false},"excerpt":{"rendered":"<p>\u00ab\u00a0`html Styled Components Site React peut transformer la mani\u00e8re dont vous g\u00e9rez le style de vos composants. Gr\u00e2ce \u00e0 Styled Components, vous cr\u00e9ez des composants&#8230;<\/p>\n","protected":false},"author":2,"featured_media":3285,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[23],"tags":[18],"class_list":["post-5984","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\/5984","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=5984"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5984\/revisions"}],"predecessor-version":[{"id":5985,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5984\/revisions\/5985"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/3285"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5984"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5984"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5984"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}