![BlogImage.jpg](https://1.bp.blogspot.com/-ceWRYEtwz0k/YJVltncU3gI/AAAAAAAA9Hg/jvAnsTbMLKQ4iBS8k4W-9__lH_QRvwskQCLcBGAsYHQ/w640-h354/428-page-policy.png)
Abstract
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;
}
Read Full Blog
Q&A
Please use this thread to ask the related questions.
Kautuk Sahni