When it comes to styling components, it helps to know your options. Read on to learn what will—and what won't—work for you.
Recently, I wanted to apply a border style to the rating component that we built in Kendo UI Builder in an earlier blog post. I added the border CSS instructions in "View Styles" (available in properties panel) but it didn't work.
For example, simply adding the style below had no effect:
In this blog post, we will learn why it did not work and what your options are when it comes to styling your components.
To understand this, we need to study how view styles work. For this, we will create a blank view with an HTML component containing the following:
And in View Styles, we enter:
When this view renders, we get something like this:
Now, let’s inspect the HTML component in Chrome's developer tools. We see:
And in the styles window we see our test-class CSS was generated as:
This CSS syntax simply means “apply color chartreuse to any element that has both test-class and _ngcontent-c5 attribute.” Using a unique generated attribute enables scoping styles to a specific view and thus avoids collisions with other views. You can read more on this here.
Now back to our problem: when we inspect the DOM of a blank view containing the rating component, we have:
We see that the div container for the rating component has a different attribute (_ngcontent-c6). As a consequence, our border style does not apply.
In summary, the reason why a CSS rule in View Style does not work is that the CSS rule is scoped to the view elements and not its descendants. A custom component is a descendant.
We have several options:
Option 1: Adding the CSS definitions in the CSS file of the Angular component. For example, rating.component.css (this is the file you can find here)
The style will be applied to all component instances on all views. This can be a pro or con depending on your use case.
Option 2: If you need a style that is view specific, you can use the “View Styles” but you will have to use some special syntax to indicate that you want to target the view components as well as all descendants.
This is achieved with the keywords “:host ::ng-deep”. For more details, please read this explanation.
So, to apply a border to our component, we would use:
Note that if you use ng-deep without host:
We get the following generated style:
Option 3: In our custom component, we can implement the most commonly used styles as separate properties. And for all other CSS styles we can define "Additional CSS" as a string property.
The advantages with this option are that:
When it comes to styling you have many options. Hopefully this blog will make it easier for you to understand your options, and help you select the one that's most appropriate to your use case.
Let our experts teach you how to use Sitefinity's best-in-class features to deliver compelling digital experiences.Learn More
Subscribe to get all the news, info and tutorials you need to build better business apps and sites
You can also ask us not to share your Personal Information to third parties here: Do Not Sell or Share My Info
We see that you have already chosen to receive marketing materials from us. If you wish to change this at any time you may do so by clicking here.
Thank you for your continued interest in Progress. Based on either your previous activity on our websites or our ongoing relationship, we will keep you updated on our products, solutions, services, company news and events. If you decide that you want to be removed from our mailing lists at any time, you can change your contact preferences by clicking here.