different styles for single component

[veerareddyc1015]

Hi Team,

Please suggest a solution for this. I have a single component and single template used in both projects — project1 and project2. Now, I want to apply different styles: white and grey for myproject1, and purple and blue for myproject2.

Thanks in Advance

Veera

[arunpatidar · Accepted solution]

Hi @veerareddyc1015 

Maybe you can try using Style System, if style change is for a component.

https://experienceleague.adobe.com/en/docs/experience-manager-65/content/sites/authoring/siteandpage... 

However the better solution is to inject additional project specific CSS from context-aware-config or via root page properties

[Vishal_Anand]

Hi @veerareddyc1015 ,

There are multiple ways of handling this. First recommendation would be to follow BEM naming convention.
e.g. cmp-component--bg-white, cmp-component--bg-grey

Benefits: Defining styles becomes simpler. Either using LESS or SASS.

Then leverage style system functionality (Style System | Adobe Experience Manager), where you can play with UI skin of component across places. Even on same template also, you can use different skin of component by picking different style system.

Thanks,

Vishal

[ShivamKumar]

Hi @veerareddyc1015

You can try these points:- 

1. Use the AEM Style System – Enable it in your component (cq:styleGroups).

2. Create separate editable templates for each project under /conf/project1 and /conf/project2.

3. Define different policies in each template:

   • Project1: Styles = White, Grey

   • Project2: Styles = Purple, Blue

4. Add corresponding CSS classes in each project’s clientlibs.

5. No need to duplicate the component – reuse the same component with project-specific style policies.

This keeps the setup clean, scalable, and easy to manage per project.

Let me know if you need help with any of the above points.

[Julkar__Naim]

Context-aware configuration might be a better solution for your usecase. Read this for more details on CA-config https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager-blogs/context-aware-config...