Question: I'm working on an app with Ionic 5.0.0, Angular 8 and using the [ionic2-calendar](https://github.com/twinssbc/Ionic2-Calendar) plugin. Although the plugin demo works fine, I can't seem to modify the styling of the calendar. 

The documentation lists a couple of classes that seem to be used for each element, but adding them to my own scss file and adding !important (or not) doesn't really work. I tried adding them to the global scss, as well as to the main app one. 

Aside from that, I've tried using the browser inspector to check which css selector is actually styling the elements in question, but the attribute selector seems to be random somehow. Current day for example is:

```
.monthview-current[_ngcontent-ljn-c3]

```

And after reloading, it is

```
.monthview-current[_ngcontent-igq-c4]

```

So clearly that method won't work either... I've also tried adding td.monthview-current, which also didn't work... Those were the suggestions and sample codes I've found from looking up this plugin online and looking around the plugin files. If anyone has any ideas whatsoever I'd be super thankful.

**EDIT:** I've found a way to change it, but ONLY through the source files for the plugin, which I have to assume is not the right way to do it... There's JSON files, JS files, and I have to manually change all of them.

Answer: 
I had the same issue and a solution is related to encapsulation as stated in other answer.

[Styling not applying to child component](https://stackoverflow.com/questions/38798002/styling-not-applying-to-child-component)

try update your component:

```
@Component({
  ...
  encapsulation: ViewEncapsulation.None // <------
})
export class xxComponent{

```

You can then apply the style based on the child class, eg.

.scss:

```
.monthview-container {
  ...;
}

```
*With depp*

```
::ng-deep {
.monthview-selected {
    background-color: blue !important;
    color: white !important;
    border-radius: 50%;
}

```

}