How to Override Styles of Third-Party Components

This is a quick how to, for overriding the styles used inside third party angular components.

For example: The Clarity angular library includes a datagrid (clr-datagrid), which has an obligatory margin at its top and bottom, which creates too much whitespace when attempting to visually add controls to the datagrid.

Note how the Previous and Next buttons sit too high off the top of the datagrid to visually belong to it.

But, adding a global style (in the global styles.scss file) can override the class style of a third party library.

Here’s a style in the global style file that gets rid of the margin above the clarity datagrid, fixing the above problem:

NOTE: an additional class name was added, so that our global style override would only affect the desired datagrid instance in our application.

Adding this global style got rid of the top margin of the above datagrid instance, making it look better… like this:

This override method was taken from here: Overriding CSS properties of third-party components in Angular