Angular2 css file with class conflict

问题

I use 2 css file but in these two file, i have a class with the same name... I use one in a component and the second in an another component.

How use these CSS file to have no more conflict ?

Thx in advance !

回答1:

I would say:

1. Change class name. Instead of have 2 classes called myClass, make myClassUsers and myClassClients, for example.
2. Change the way you reference them to be more precise, making use of other classes that are actually unique to each component. Example:

CSS file 1:

div.comp1Class > table > tr.myClass {...}

CSS file 2:

div.comp2Class > table > tr.myClass {...}

Instead of having in both:

.myClass {...}

回答2:

Can you apply a more specific selector? Specific selector takes precedence over a less specific one.

Eg. For Component XYZ, the selector in CSS will be .xyz .common-class-name{ Code goes here } And for Component ABC, the selector in CSS will be .abc .common-class-name{ Code goes here } That way you can resolve this issue.

来源：https://stackoverflow.com/questions/44030395/angular2-css-file-with-class-conflict