如何考虑样式化AngularJS组件？

Question

我正在一个AngularJS项目中，目的是为了使Angular 6或我们开始升级时推出的任何版本的东西慢慢变好。这项工作的主要内容之一就是将现有指令转换为组件。

我最努力的事情是，组件的每个实例都会在DOM中引入一个额外的元素，该元素包装了我的实际组件HTML并破坏了层次结构，这使得编写满足其要求的CSS变得非常困难

为说明我的难题，请想象一个名为alert的简单组件，该组件为您希望用户注意的各种消息提供样式。它接受两个绑定，一个message和一个type。根据{{​​1}}，我们将添加一些特殊的样式，并可能显示其他图标。所有的显示逻辑都应该封装在组件内，因此使用它的人只需要确保他们正确地传递了数据就可以了。

type

选项A：将样式放在额外元素内的<alert message="someCtrl.someVal" type="someCtrl.someVal"></alert> 上

组件模板

<div>

无礼

<div
    class="alert"
    ng-class="{'alert--success': alert.type === 'success', 'alert--error': alert.type === 'error'}">
    <div class="alert__message">{{alert.message}}</div>
    <a class="alert__close" ng-click="alert.close()">
</div>

只要组件完全不知道周围的所有内容，此方法就可以正常工作，但是第二个您想将其放入flex-parent中，或者使用诸如“ +”的选择器，它将中断。

选项B：尝试直接设置额外元素的样式

组件模板

.alert {

    & + & {
        margin-top: 1rem; // this will be ignored
    }

    &--success {
        background-color: green; // this will work
    }

    &--error {
        background-color: red; // this will work
    }
}

无礼

<div class="alert__message">{{alert.message}}</div>
<a class="alert__close" ng-click="alert.close()">

现在我遇到了相反的问题，因为我无处可以为成功和错误状态附加修饰符类。

我在这里错过了什么吗？处理存在于组件本身范围之外的此附加元素的最佳方法是什么？

Answer 1

我亲自执行选项A。这使您可以轻松地为组件标识和创建特定样式，而不必担心它们会覆盖整个站点的样式。例如，我将使用嵌套样式来完成此任务：

#componentContainer {
    input[type=text] {
        background-color: red;
    }
}

这将使您能够为组件创建通用样式，而这些样式不会溢出到解决方案的其余部分中。