ViewEncapsulation.None不会造成冲突

Question

我正在尝试在两个组件中自定义CSS样式，这些组件使用包裹了javascript编辑器（CodeMirror）的另一个组件。

该组件称为editor，我这样使用它：

<editor [someVal]="123"></editor>

要调整编辑器高度，请在第一个Angular组件中使用styles：

styles: [`
        .CodeMirror-scroll{
            max-height: 120px !important;
        }
`],
encapsulation: ViewEncapsulation.None

我需要使用ViewEncapsulation.None，否则样式将不适用于编辑器。

我在第二个Angular组件中执行相同的操作，但是使用了不同的height：

styles: [`
        .CodeMirror-scroll{
            max-height: 500px !important;
        }
`],
encapsulation: ViewEncapsulation.None

问题是当我在应用程序中同时使用两种样式时会发生冲突。它始终占用第二个组件的高度。该如何解决？

Answer 1

您可以在特定的组件上使用CSS进行更具体的说明。

my-component-1 .CodeMirror-scroll{
  max-height: 120px !important;
}
my-component-2 .CodeMirror-scroll{
  max-height: 500px !important;
}

或者您可以使用该CodeMirror-scroll应用不同的类来封装组件。

.CodeMirror-scroll{
  max-height: 120px !important;
}
.larger .CodeMirror-scroll{
  max-height: 500px !important;
}