So, how did you apply the specific styling?
#Apply CSS to shared component on specific page
reef fossil
Well, don't put that styling in state-editor-component.html if you want it to apply only to one instance of that component and not all the others.
Either put it in the question-suggestion-review-component.html(prefixed with ::ng-deep, or leave it there, but make it more specific (with an additional class for example) that would be passed as input somehow when you want that additional styling to apply.
reef fossil
You should be able to apply the styling if you use ng-deep. And regarding the input, well, it's an input, like any other input. @Input() showItDifferently = false.
limpid notch
I am not sure if it's a better approach, but you can do this using :host-context. So basically if you want to apply different styles to state-editor-component.html when it's dynamically loaded into suggestion-review-component, you can place your component in a div with a specific class specifying the component:
<div class="suggestion-review-component"> <app-state-editor></app-state-editor> </div>
And in your state-editor-component.scss:
:host-context(.suggestion-review-component) { // your styles , make sure // scss nesting matches }
It means that your components will apply those styles when its parent's class is .state-editor-component. Hope it'll help.
*updated
Looks like ::ng-deep is deprecated. I think :host-context would be a better choice. Good luck