How to avoid a specific css file to apply on my Component in Angular

Question

I'm currently using bootstrap for my modal component but our current project has a css file that is using the same class with bootstrap (.Modal,.Modal-header).

The css styling of both files was messing the modal design.

Any solution for this?

Update

I use ::ng-deep to my css so I can specifically target without conflicting other css file.

I can't do that, it might break some part of our application. — kirito127, Oct 06 '21 at 05:16
change the class name or overwrite the styles for the desired class name by selecting its parent component — Viira, Oct 06 '21 at 05:19

score 2 · Accepted Answer · answered Oct 06 '21 at 05:18

2

I think you should not use Bootstrap components in your class. If this was not helpful, please check ask from https://stackoverflow.com/users/395910/terry or https://stackoverflow.com/users/8213994/aman-gojariya. They helped me too.

answered Oct 06 '21 at 05:18

The Learning Network

54
5

You can use Bootstrap 5. It has new features and more. – The Learning Network Oct 06 '21 at 05:21

How to avoid a specific css file to apply on my Component in Angular

1 Answers1