Question

在我的顶级组件的样式块中，我定义了一个/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 {}

ChildComponent.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 {}

我认为，因为child-item首先出现在已编译的样式表中，所以不太重要的类具有更高的css特异性，并且在两个类之间的任何冲突中都胜出。如何为子项目提供更高的优先级？

Answer 1

/ deep /用来过度父母的风格，所以说你想改变父母可以使用的div的余量/ deep / {margin：** px}

据我所知，当您不希望父组件干扰子组件的样式时，您在子组件中定义样式。如果你想要父母的风格优先，那么我会说不要在孩子中定义那些风格。这意味着在您的情况下，不要在子组件中定义的样式中指定边距。

另一种方法是不要在父或子中定义那些stlyes但是创建一个新的全局样式表并且只添加全局样式当然你需要在index.html中引用该样式表所以在你的情况下我会删除来自父级和子级的样式的边距，并将其添加到styles.css并在index.html中引用styles.css

我如何制作一个Angular2＆＃34; deep＆＃34; css类优先？

1 个答案: