different styles for single component | Community
Skip to main content
veerareddyc1015
veerareddyc1015
Level 3
July 2, 2025
Solved

different styles for single component

  • July 2, 2025
  • 4 replies
  • 442 views

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

Best answer by arunpatidar

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/style-system 

 

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

4 replies

arunpatidar
Community Advisor
arunpatidarCommunity AdvisorAccepted solution
Community Advisor
July 2, 2025

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/style-system 

 

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

Arun Patidar
    Vishal_Anand
    Vishal_Anand
    Level 4
    July 2, 2025

    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

      S
      ShivamKumar
      Level 4
      July 3, 2025

      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.

       

        J
        Julkar__Naim
        Level 2
        July 4, 2025

        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-configuration-in-aem/ba-p/620639 

          Terms & ConditionsAccessibility statement

          Loading footer...