Блог

В блоке styles моего компонента верхнего уровня я определяю /deep/ класс css, который задает поля для любых элементов, которые будут отображаться в его ng-контенте. Как я могу сделать так, чтобы этот css-класс имел приоритет — даже если дочерний компонент применяет свой собственный css-класс, у которого определены разные поля.

Например:

ParentComponent.ts:

 @Component({
    selector: 'my-parent',
    styles: [`
        /deep/ .child-item { /* I WANT THIS TO TAKE PRECEDENCE */
            margin-right: 10px;
            margin-left: 10px;
        }
    `],
    template: `
        <div>
            <ng-content></ng-content>
        <div>
    `
})
export class ParentComponent {}
  

Дочерний компонент.ts

 @Component({
    selector: 'my-child',
    styles: [`
        .less-important-class { /* THESE MARGINS SHOULD BE IGNORED IN CONFLICTS */
            margin-right: 5px;
            margin-left: 5px;
            background-color: rgba(255, 0, 0, 1.0);
        }
    `],
    template: `
        <button type="button" class="less-important-class child-item">My Little Button</button>
    `
})
export class ChildComponent {}
  

Я думаю, поскольку дочерний элемент появляется первым в скомпилированной таблице стилей, менее важный класс обладает более высокой специфичностью css и выигрывает в любых конфликтах между двумя классами. Как я могу присвоить дочернему элементу более высокий приоритет?

/deep/ используется для переопределения родительского стиля, поэтому, допустим, вы хотите изменить поле div в parent, вы можете использовать /deep/ {margin: **px}

Насколько я знаю, вы определяете стили в дочернем компоненте, когда не хотите, чтобы родительский компонент вмешивался в стили дочерних компонентов. Если вы хотите, чтобы родительский стиль имел приоритет, я бы сказал, не определяйте эти стили в дочернем. Это означает, что в вашем случае не указывайте поля в стилях, определенных в дочернем компоненте.

Другой способ — не определять эти стили ни в родительском, ни в дочернем элементах, а создать новую глобальную таблицу стилей и добавить туда только глобальные стили, конечно, вам нужно ссылаться на эту таблицу стилей index.html Поэтому в вашем случае я бы удалил margin из стилей как родительского, так и дочернего и добавил его в файл styles.css и сослалсяstyles.css в index.html