Toggle between two different global SCSS styles using a selector

I am in the process of upgrading my company's AngularJS project to Angular 8 using ngUpgrade. This has resulted in a hybrid application with components from both AngularJS and Angular. Additionally, I am utilizing an angular material template that includes SCSS files for both frameworks.

My current challenge is to apply the AngularJS theme only to AngularJS components and the Angular theme only to Angular components, even when they are nested within each other.

I have been trying to find a solution to switch between two global CSS styles based on the presence of specific classes without resorting to lazy loading CSS.

Imagine my app code structure looks like this:

<div class="theme-1">
    <div>Some stuff that should get theme 1 CSS</div>
    <div class="theme-2">
        <div>Some stuff that need ONLY theme 2 CSS</div>
        <div>without theme 1 CSS</div>
        <div class="theme-1">
            <div>Switching back to theme 1</div>
        </div>
    </div>
</div>

I am looking for a way to dynamically switch between themes when the class theme-1 or theme-2 is present.

cssangularjsangularsassng-upgrade

Answer №1

Utilizing the BEM approach is recommended for this task, with your code structured as follows.

.theme-1 {
    &__div1{...}
    &__div2{...}
    ...
}

.theme-2 {
    &__div2{...}
    ...
}
.theme-1,
.theme-2 {
    /* Common Css */
    &__div1{...}
    &__div2{...}
    ...
}

This allows you to define classes in the following manner:

<div class="theme-1__div1">
    <div>Some stuff that should get theme 1 CSS</div>
    <div class="theme-2__div1">
        <div>Some stuff that need ONLY theme 2 CSS</div>
        <div>without theme 1 CSS</div>
        <div class="theme-1__div2">
            <div>Switching back to theme 1</div>
        </div>
    </div>
</div>

For more information on BEM, please refer to this link - . If you require further clarification, I can provide the same code again. Feel free to reach out if you have any questions.

Answer №2

In my situation, I found that implementing encapsulation: shadowDow on my angular components was the key to overcoming the issue. This approach enabled me to override theme1 css with theme2 css exclusively.

Although I had to make numerous adjustments to the css due to some angular material functionalities not being compatible with shadowDom, I am unable to revert back to theme1. Despite these challenges, this method has proven to be the most effective solution thus far.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Exploring how to retrieve time using PHP and JavaScript

When displaying a date in php or javascript, what factors influence the calculation? Is it dependent on the user's computer time settings, or is it sourced externally? If the user has control over it, how can I ensure my code accurately retrieves the ...

javascriptphphtmlcsstime

The Mat-paginator is refusing to align to the right edge when scrolling the table horizontally in an Angular application

https://i.sstatic.net/l0cZ4.png Overview: My Angular component features a table with Angular Material's mat-table and paginator. Despite fetching data from a source, the paginator fails to float right when I scroll horizontally. Sample Code: <!- ...

htmlcssangularangular-material

Transforming JavaScript into TypeScript within an Angular 4 component class

Here is the Javascript code I currently have. I need to convert this into a component class within an Angular component. As far as I understand, the Character.prototype.placeAt() code is used to add a new method or attribute to an existing object. In this ...

javascriptangulartypescript

Setting the size of a box using CSS in HTML pages

I am facing issues with resizing boxes. Below is the code snippet: <!DOCTYPE html> <html lang="en"> <head> <style> .wrapper { text-align: center; } #bubble { display: inline; -moz ...

htmlcss

Struggling with getting the navigation bar to show up in a row instead of stacking

Hey there, I need some help with the layout of my page. Here's the link to the page I'm currently working on: At the moment, the list is showing up vertically instead of horizontally. CSS: li { display:inline; list-style-type:none; ...

htmlcsslistinline

Angular 2 Template - Show alternate content if the string is empty

Back in the AngularJS days, there was a neat trick where you could bind data to a string directly in the markup like this: {{myString | 'N/A'}} This little trick would check if the string was empty and if so, display 'N/A' instead. It ...

angulardata-bindingoperators

Error message in Angular 2: Unable to locate node module for import

Recently, I encountered an issue while attempting to utilize a specific node module called aws-api-gateway-client Although the installation was successful, I am facing difficulties with importing this module due to an error. Oddly enough, it works seamle ...

angulartypescript

Maximizing AngularJs performance on handheld devices

Recently, I developed an HTML page using material angularjs that functions perfectly on desktops with various browser sizes. However, the issue arises when opening the same page on a mobile device as it behaves like a desktop application instead of adjust ...

htmlangularjsangularjs-materialresponsiveness

Ways to utilize mat-option as a property in mat-select within Angular 5

Attempting to implement a similar approach: <mat-select [(ngModel)]="food.id" mat-option="food.name for food of foods" placeholder="Favorite food"> Unfortunately, this method does not seem to be functioning as expected. Are there specific steps nee ...

angularangular-material2

Exploring the intricacies of the let and const modifiers in ngFor loops

I encountered some unexpected behavior with the const keyword while using it in an Angular 2 *ngFor loop. Let's consider the following base code: interface Foo { name: string; list: string[]; } @Component({ ... }) class FooComponent() { ...

angulartypescript

What is the process for changing the color of material-icons to white in an Angular Dart project using angular_components?

Is there a way to set the color of material-drawer material-icon to white on a dark background in an angular_components project using Angular Dart? app_component.html <material-drawer persistent #drawer="drawer" [class.custom-width]= ...

angulardartangular-componentsangular-dartgoogle-material-icons

Is there a universal resolver available for the $routeProvider in AngularJs 1.x?

Can a service be globally resolved for all routes in AngularJs? For example, if I need to retrieve configuration from a Web Service for all the routes, is it possible to achieve something similar to the following pseudocode? $routeProvider .when(&apos ...

angularjs

Having trouble with AngularJS and NodeJS routing integration?

After deciding to dive into the world of application development using the MEAN Stack, I encountered a major roadblock. For the past hour, I've been struggling to set up a basic route, only to face failure at every turn. Whenever I try to access my ...

javascriptangularjsnode.jsexpress

This function appears to have an excessive number of statements, totaling 41 in total

Currently, I am using this controller: .controller('ctrl', function($scope, $rootScope, $timeout, $alert, $location, $tooltip, $popover, BetSlipFactory, AccordionsFactory, AuthFac ...

javascriptangularjsjshint

CSS - Absolute positioning appears to be slightly choppy in Microsoft Edge

I have successfully implemented a slip scrolling function to reveal/hide a fixed logo on scroll, but I am facing some issues with Microsoft Edge browser. While testing in various browsers, everything works smoothly except for Microsoft Edge. In this brows ...

javascriptjqueryhtmlcssmicrosoft-edge

Exploring the Angular 7 Sidebar with Bootstrap 4

Is it feasible to design a Bootstrap 4 sidebar with sub menus in Angular 7, similar to the example shown here Appreciate any assistance! ...

angularbootstrap-4angular7

Utilize a CSS rule exclusively if the following div element is present - Purely CSS, no need

Can we apply a CSS rule only when a div follows another div? For example: <div class="div1">...</div> <div class="div2">..</div> CSS Example: (if div2 exists) .div2 .div1 (apply CSS rule to div1) { backgrou ...

htmlcss

Can anyone share tips on how to ensure that text placed over an image can adapt and respond effectively

I'm facing some difficulty in ensuring that my text remains responsive alongside the image it's paired with, especially on mobile view. This is how the module appears in desktop/tablet view: https://i.sstatic.net/85mik.jpg And here is its appe ...

htmlcsstwitter-bootstrapresponsive

Manipulate the visibility of an object in AngularJS based on the value of a key within a JSON array

Hello, I am a newcomer to Angular and facing two issues that I need help with. The first issue is related to displaying different text in the view based on the key of the JSON data. For example, if the key is rcs, then hello this is rcs should be displaye ...

angularjsjsonangularjs-ng-repeat

Angular 2 - Implementing click event functionality to add an item

I've searched for a solution to this before, but the best answer I could find was from 9 months ago: here and it doesn't work with the latest Angular version. Is there a way to add a new item (<li> or any other) to my HTML with a simple cl ...

angularonclick