Fermer

février 8, 2022

Optimisation : Modifications du guide de style Spire avec les méthodes setPreStyleGuideTheme et setPostStyleGuideTheme


Dans Spire, nous avons deux méthodes principales pour changer le style des éléments globaux. Nous l'appelons le guide de style, qui couvre le style des éléments HTML tels que les titres, les paragraphes, les balises d'entrée, etc. Pour les composants frontaux, nous utilisons la bibliothèque Mobius, qui est un composant React Styles configurable et extensible. Voici les deux méthodes :

setPreStyleGuideTheme : cette méthode est principalement utilisée pour les changements de thème Mobius et vient avant la méthode "setPostStyleGuideTheme".

setPostStyleGuideTheme : après le "setPreStyleGuideTheme", nous utilisons cette méthode. pour remplacer nos styles dans notre guide de style, et c'est la dernière modification de notre guide de style. Le guide de style d'un administrateur ne peut pas remplacer le style défini ici.

Par exemple, disons que nous voulons changer la couleur du bouton principal dans le plan Spire. Ici, nous avons créé un plan personnalisé avec le nom "CustomBluePrint" à l'intérieur du "src/Start.tsx". Dans le "Start.tsx", nous écrivons les méthodes "setPreStyleGuideTheme" et "setPostStyleGuideTheme".

Remarque : Le « thème Mobius de base » peut être modifié par les méthodes pré et post-guide de style.  pour la mise à jour des guides de style. Par conséquent, vous pouvez mettre à jour le guide de style à partir du panneau Guide de style de la console d'administration si nécessaire.

Pourquoi l'utilisation de ces méthodes est utile

En utilisant ces deux méthodes, vous pouvez réduire considérablement le temps total changements liés au style du site Web, évitez d'apporter des changements de style aux composants React individuels et améliorez les performances de votre site Web et l'expérience utilisateur. Pour plus d'informations, contactez nos experts.

À propos de l'auteur

Rajiv Tandon est consultant technique principal chez Perficient avec plus de 8 ans d'expérience dans les technologies frontales. Il possède une connaissance approfondie d'Insite, de Magento 2 et d'autres plateformes de commerce électronique. Il aime rechercher des connaissances et explorer les dernières technologies frontales. n=f.fbq=fonction(){n.callMethod ?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n;
n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(fenêtre,
document,'script','https://connect.facebook.net/en_US/fbevents.js');

fbq('init', '911436665572720');
fbq('track', "PageView");




Source link