0

How do we override the CSS created by an angular directive. For example when we add the add the sort directive to the material data table it creates this problem (It overrides the layout of the column header)..

Overriding the CSS via styles.scss or the components local CSS, does not work, because the directive adds an inline style which has priority. Also tried adding !important to the CSS definition override, but no love.

Thoughts?

Improve this question

2 Answers 2

Reset to default
1

I can suggest one method, write a custom CSS class in your component's CSS/SCSS file and apply it using a condition with NgClass directive, execute your condition within onInit.

just try and see, I hope it'll work

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Better to execute on ngAfterViewInit if you want to do that but ngclass and adding a class are the same thing
yes better use ngAfterViewInit, but adding a class or ngClass is not same in this moment. both will add a class but we should carefully when to add the class. if add a class directly, it will override by directive's styles, that why we need to add out class after all other styles are applied
1

You can either use NgStyle or Angular Style Binding if classes' style is not being applied. Best way is to use ngdeep

If this still doesn't work put it on a setTimeout or ngAfterViewChecked (Not recommended tho.).

Improve this answer

3 Comments

IIUC ngdeep is depcreated.
Yup says it's deprecated.
Until then ::ng-deep should be preferred for a broader compatibility with the tools.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.