Как применить стиль к содержимому пользовательского компонента в Angular?

Question

Я пытаюсь применить стили к дочернему элементу пользовательского компонента.

Селектор:

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

Внутри custom-component-example.html:

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

Если бы я использовал такой стиль:

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

Или вот так:

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

Текст кнопки не станет зеленым. Стиль может быть любым (например, шрифт-вес или размер или что-нибудь на самом деле).

Я также пробовал решение этой темы:

Лучший способ передать стиль компоненту

Но это также не относится к дочернему элементу (кнопка в примере выше).

Как передать любой заданный стиль и применить его к дочернему элементу, в случае примера, как я могу передать стиль (через селектор примера настраиваемого компонента) и применить его к кнопке и тексту кнопки

Заранее спасибо.

Answer 1

Вы никогда не должны изменять дочерний стиль от родительского, вместо этого вот что вы должны сделать:

Применить класс к родителю (скажем, зеленая кнопка).В css ребенка вы должны проверить, есть ли у моего родителя зеленая кнопка класса, если да, тогда он должен изменить свой цвет.

В файле css ребенка ->

:host-context(.green-button) button{
color : green
}

Вы не должны передавать стили от родителя к потомку, так как это портит качество ViewEncapsulation, которым Angular гордится.Вот некоторые ссылки.: Ссылка

Кроме того, дочерний компонент должен отвечать за то, как выглядит кнопка.Родитель должен заботиться о себе.В будущем, если у вас будет два ребенка от вашего родителя, будет трудно определить, какой стиль передать какому ребенку.Используя этот метод, изменение стиля не только легко, но и управляемо.

Повышение и пометка как решенное, если я смогу помочь. Приветствия.

Answer 2

Попробуйте изменить styles на [styles]

custom-component-example.html

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

custom-component-example.ts

@Input() styles: any = {};

Использование,

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

Answer 3

Вам необходимо передать свойство стиля дочернему компоненту, используя @Input(), как

HTML-код вашего дочернего компонента должен выглядеть так:

<div [className]="tableCss">
</div>

Ваш дочерний компонент должен выглядеть как код файла

@Input() tableCss: string;

Ваш родительский компонент должен выглядеть как

<app-list [tableCss]="'table-responsive table-borderless table-grid mt-4 border-top border-primary'"></app-list>

Answer 4

Если вы хотите использовать ввод и стили без глубокого выбора CSS, как это:

a > b > c {
    color: green;
}

Измените этот класс на этот:

class CustomComponentExample {
    @Input() styles;
}

Установить стили для этого ввода:

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

Используйте это свойство в своем компоненте:

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

Answer 5

Я использую этот подход для стилизации моего компонента следующим образом. Но я использую scss, поэтому вы должны использовать scss, если вы хотите иметь вложенный стиль, как мой

custom-component-example {
  color: red;
  & > div {
    font-size: 16px;
 }
}