How to pass custom styles to your angular components (Without using JS props or ::ng-deep)
Code link
Problem Statement
At times, we want to apply custom styles to an angular component which is already being used at multiple places. We don’t want to change the HTML and TS component files as doing that means that we’ll have to change the test files, the storybook of the component etc. In this article I’ll cover how I was able to customise an Angular component’s style without having to make any HTML/TS changes.
Style Encapsulation
In the current component-based world, we encapsulate all the styles of a component inside the component itself. That’s absolutely critical to ensure consistency and increase re-usability.
Let’s take an example of a simple tooltip component. You would want the tooltip to have the same background, same padding, same font size, border-radius, etc. That way no matter where this tooltip is used, it’ll look and feel the same. Another plus point is that the developer won’t have to re-invent the wheel by having to add all these styles every time they want to use the tooltip hence reducing the resistance to re-use.
Encapsulating styles by using modular CSS (component-specific styles), or styled-components (for React), also prevents CSS class collisions. If the style of the tooltip component is encapsulated in the component, then these style classes won’t collide with other component styles and vice-versa. There are a lot more benefits of encapsulation of styles but I’ll stop here and take a look at the issues we have to face while using this approach.
Style Customization
The biggest issue with style encapsulation is that it’s harder to customize the component style.
Let’s say that you want to use the tooltip component at a place where the page’s background matches that of the tooltip background. Now we’ll have to change the tooltip’s background only for this page while maintaining the original background for everywhere else. We have a few options here -
- Pass a custom background color prop. (you can pass a custom
@Input() colorprop from the component and then use that as the background color) I'm not a very big fan of this approach as passing styles down isn't a very clean and maintainable solution - Use ::ng-deep to re-write the background style to the new color. The problem with this solution is that angular has already deprecated ::ng-deep
The solution I use — CSS variables
I use CSS variables to pass custom styles down to the component. Let’s get back to our tooltip component.
Any style that I want to customize will first be defined as a CSS variable in the :host class.
// tooltip.component.css
Orignal style file -
.tooltip-body {
background-color: grey;
}Modified style file -
:host {
--tooltip-background-color: grey;
}.tooltip-body {
background-color: var(--tooltip-background-color);
}
Now, whenever I want to modify the tooltip’s background color, all I need to do is to update this CSS variable.
// some-other.component.html
<div>
<h2> Some other component </h2>
<tooltip></tooltip>
</div>// some-other.component.css
tooltip {
--tooltip-background-color: red;
}
Voila, our tooltip component will now have the custom style of red background color, while still maintaining the grey color for all the other places.
I would love to know what you think about this approach and what solution do you use for this issue. Let me know in the comments down below or you can just dm me on my LinkedIn
References -
- Check out this link to know more about CSS variable hoisting.
Proofread by -
Kishore Torlakonda
Kishore is one of the smartest developer’s that I’ve had a pleasure to work closely with for over 2 years now.
Go follow him on his LinkedIn — https://www.linkedin.com/in/kishore-torlakonda-586ba0a7
About the Author
Hi, I’m Srijan
I’m a passionate front-end developer. In my free time, I enjoy writing articles, playing tennis, and watching F1 (not in any specific order)
Check out more of my articles here — https://medium.com/me/stories/public
My LinkedIn — https://www.linkedin.com/in/srijan-gulati-851b8024/