Dynamic Styling with JSS – HTML Goodies

The Introduction to CSS-in-JS web development tutorial presented some of the benefits of CSS-in-JS and elucidated why it is one of the hottest trends in web development. As it turns out, one of main advantages of combining CSS with JavaScript is that you can instantly change the appearance of many page elements with a few lines of code. While dynamic styling alone is not reason enough to jump on the CSS-in-JS bandwagon, if you have decided to give it a go for some of its other benefits, you may want to set styles on the fly. Case in point, the Using an Angular Service to Read Sass Variables Demo that we partially transitioned to CSS-in-JS allowed the user to set some theme colors at runtime:
CSS-in-JS tutorial
Hence, that app is the perfect candidate for test driving the dynamic styling capabilities of JSS, which is a framework agnostic library that we utilized to implement CSS-in-JS.
In the Introduction to CSS-in-JS web programming tutorial, we learned that the method to create a style sheet is the aptly named createStyleSheet(). In addition to the styles object, we can also pass it some options. We will not be going over all of the options here, except for link. It s a Boolean that links jss Rule instances with the native DOM CSSRule counterpart so that styles can be modified dynamically via attribute functions. It is false by default because it has some performance costs, but we have got good reason for activating it in our app.
Here is a recap of the jss initialization and stylesheet generation code from last time, along with the extra options parameter:
Now we are ready to update some CSS Rules.
Taking a look at the feed.component.styles.ts file that we created in the last article, you can see that the three last properties use a function to set their values:
That is how JSS supports dynamic styling. You could try to set a property directly like so:
However, that would not affect the underlying stylesheet, only the JSS rule mapping.
The JSS way to modify CSS rule values on the fly is to call the StyleSheet instance’s update() function. It sets one or more property values for a rule at once. So, to set our three colors, we would invoke update() as follows:
Each property’s callback function then receives the passed Rule object as an attribute of the larger styles object, just as we defined our styles. If you omit a dynamic property from a rule, that property’s value will evaluate to undefined. That’s not a problem for top-level properties like the backgroundColor; it will simply undo any existing value. However, nested properties such as the two pseudo-classes will throw an error similar to the following:
As the error message sums up so eloquently, that happens because we are attempting to access the properties of an undefined object.
One way around that, other than supplying all of the dynamic values, is to provide a fallback within the callback function:
We’ll have to provide some initial values if we want the news image to have some default background and border colors when the page first loads. Since we are already initializing jss in ngOnInit(), when the Feed Component receives the @Input variables, we can set them in there:
The updateColors() method contains the call to this.stylesheet.update() method above so that we can invoke it whenever the user switches color radio buttons.
Read: Dynamic Text Styling in Angular
Clicking a radio button updates the underlying color variable in the App Component, which triggers the ngOnChanges event in the Feed Component. There, we can test for changes to our color variables and invoke updateColors() accordingly:
Notice that we must also verify that the stylesheet has been initialized because the first ngOnChanges event fires for the initial @input values, which happens before ngOnInit.
You can look over the code that updates the News Image colors in the stackblitz demo. It is the same one that was introduced in the Introduction to CSS-in-JS tutorial, as it already included the update functionality.
In a real-world application, the management of JSS colors would benefit from being done in a service, so that the Feed Component does not have to concern itself with the methods and structure of the JSS object. I would suggest moving all of the JSS initialization code and updateColors() method to the service. UpdateColors() would be especially easy to move because the changes parameter could simply be passed along to the service function.
Read more JavaScript web development tutorials.
The original home of HTML tutorials. HTMLGoodies is a website dedicated to publishing tutorials that cover every aspect of being a web developer. We cover programming and web development tutorials on languages and technologies such as HTML, JavaScript, and CSS. In addition, our articles cover web frameworks like Angular and React.JS, as well as popular Content Management Systems (CMS) that include WordPress, Drupal, and Joomla. Website development platforms like Shopify, Squarespace, and Wix are also featured. Topics related to solid web design and Internet Marketing also find a home on HTMLGoodies, as we discuss UX/UI Design, Search Engine Optimization (SEO), and web dev best practices.
Advertise with TechnologyAdvice on HTMLGoodies and our other developer-focused platforms.
Property of TechnologyAdvice.
© 2022 TechnologyAdvice. All Rights Reserved

Advertiser Disclosure: Some of the products that appear on this site are from companies from which TechnologyAdvice receives compensation. This compensation may impact how and where products appear on this site including, for example, the order in which they appear. TechnologyAdvice does not include all companies or all types of products available in the marketplace.


Hire me on the World’s Leading Online Marketplace Freelancer.com to design your website. Additional services like- graphic design, virtual assistance, SEO, Data entry, etc are available. Click on This Link to start your project

Write a comment