Goal AEM Cloud Version : 2021.5.5257.20210505T101930Z-210429 (May 05, 2021) Extend the JSON model eg. /content/eaem-cs-spa-style-system/us/en.model.json for supporting Page Style System in a React SPA. The following extension adds page level css classes configured via Style System in the model's children cssClassNames property eg.spa page basicpage eaempage--background-aero and necessary logic on the react side to apply it... Solution 1) Create the project using following maven archetype command mvn -B archetype:generate -D archetypeGroupId=com.adobe.aem -D archetypeArtifactId=aem-project-archetype -D archetypeVersion=24 -D aemVersion=cloud -D appTitle="Experience AEM SPA Style System" -D appId="eaem-cs-spa-style-system" -D groupId="apps.experienceaem.sites.spa" -D frontendModule=react -D includeExamples=n -D includeDispatcherConfig=n 2) Create the CSS file for Page Style System classes /apps/eaem-cs-spa-style-system/clientlibs/clientlib-base/main.css with the following code, add it in /apps/eaem-cs-spa-style-system/clientlibs/clientlib-base/css.txt .eaempage--background-gray{ background-color: #f1f1f1; } .eaempage--background-white{ background-color: #ffffff; } .eaempage--background-black{ background-color: #000000; } .eaempage--background-beige{ background-color: #EEE1C6; } .eaempage--background-aero{ background-color: #CAF1DE; }
Please use this thread to ask the related questions.
Topics help categorize Community content and increase your ability to discover relevant content.
Views
Replies
Total Likes
Hi,
Is it possible to apply styles at layout level in SPA. I tried your above example without writing any code and worked as expected in SPA page level. Is there any reference/documentation to point out layout level for SPA.
Thanks.