Question: I am trying to apply styling to a child of a custom component.

Selector:

```
<custom-component-example></custom-component-example>

```

Inside custom-component-example.html:

```
<button>
    <ng-content></ng-content>
</button>

```

If I were to use style like this:

```
<custom-component-example style="color: green">some text</custom-component-example>

```

Or like this:

```
<custom-component-example [ngStyle]="{'color': green}">some text</custom-component-example>

```

The button text will not get green. The styling could be anything (for example font-weight or size or anything really).

I have also tried the solution to this topic:

[Best way to pass styling to a component](https://stackoverflow.com/questions/35734073/best-way-to-pass-styling-to-a-component)

But that also does not apply to the child element (button in the example above). 

How do I pass any given styling and apply it to the child element, in the case of the example, how would I pass styling (through the custom-component-example selector) and apply it to the button and the button's text?

Thanks in advance.

Answer: 
Try to change `styles` into `[styles]`

**custom-component-example.html**

```
<button [ngStyle]="styles">
    <ng-content></ng-content>
</button>

```

**custom-component-example.ts**

```
@Input() styles: any = {};

```

Use,

```
<custom-component-example [styles]="{color: green}">some text</custom-component-example>

```
Try this:

1. Add a class on that component into your template file like this example bellow. (class='toggle-button').

> 
> `<custom-component-example class="toggle-button"> Button name </custom-component-example>`
> 
> 
> 

2. Use `::ng-deep` to your `scss` file for styling this class and add `!important` to that parameter.

```
 ::ng-deep .toggle-button { .switch-btn {
 width: 80px !important;
 height: 40px !important;}}

```

\*"switch-btn" class is a class into the parent component.