0

In my <app-root> I have <app-sidebar> in which I have a <div class="myClass">. In my body tag I have class "myBodyClass" that toggles. I want to style my div depending on the class in the body-tag, what I have is somthing like this:

.myClass{
  background-color:red;
}
.myBodyClass > .myClass{
  background-color:yellow;
}

tryed as well:

 .myBodyClass .myClass{
  background-color:yellow;
 }

but none of them works ,what is the correct way to achive that?

pb4now
  • 1,305
  • 4
  • 18
  • 45
  • share your full HTML then – Temani Afif Mar 31 '18 at 08:45
  • 2
    I believe the problem being faced here is to due with Angular and possibly style encapsulation. I don’t believe it’s a duplicate of any of the answers above. – Hugo Noro Mar 31 '18 at 09:00
  • @TemaniAfif at my mobile at the moment will share an example as soon I'm back at my computer (y) – pb4now Mar 31 '18 at 09:08
  • 3
    I can't add answer since question is closed for now, but try that in your sidebar component `:host-context(.myBodyClass) myClass { background-color:yellow; }` – David Mar 31 '18 at 09:16
  • 1
    I agree with @HugoNoro this is angular specific – David Mar 31 '18 at 09:17
  • 1
    @TemaniAfif can you please have a second look at the question? I believe it was wrongly closed. – Hugo Noro Mar 31 '18 at 09:18
  • @HugoNoro without any more information we cannot know ... check his first edit and we have no information about the HTML ... so for me it's a specifity issue until he provide more code ... will reopen the question if it's not the case – Temani Afif Mar 31 '18 at 09:20
  • @David You are a savior- that is correct - will accept it as an answer as soon it is avaiable , ty again(y) – pb4now Mar 31 '18 at 09:22
  • @TemaniAfif fair enough. pb4now please provide additional code to clarify the issue you are facing. And ideally also please update the title of the question to make it more clear – Hugo Noro Mar 31 '18 at 09:22
  • question reopned, but add more clarification so we know it's an angular issue – Temani Afif Mar 31 '18 at 09:26
  • @HugoNoro well in that case will have to create some simple exampe in plunkr and put link here -pls just give me an hour or so I can seat down with it – pb4now Mar 31 '18 at 09:27

1 Answers1

2

What you are looking for is the host-context combinator

Sometimes it's useful to apply styles based on some condition outside of a component's view. For example, a CSS theme class could be applied to the document element, and you want to change how your component looks based on that.

https://angular.io/guide/component-styles#host-context

:host-context(.myBodyClass) myClass {
  background-color:yellow;
}

The other solution is to declare that rule in the global stylesheet, not in your component' css (because of the default encapsulation)

David
  • 33,444
  • 11
  • 80
  • 118