css - 是否可以使用 Angular 2 的 ViewEncapsulation.Native 为不同的 Web 组件设置不同的 "rem"？

Question

我想用 ViewEncapsulation.Native 制作组件，它使用 Bootstrap 4，而其他人使用 Bootstrap 3。这是 Bootstrap 4 的组件:

import { Component, ViewEncapsulation } from '@angular/core';
import { NgForm }    from '@angular/common';

import { Hero }    from './hero';
@Component({
  selector: 'hero-form',
  templateUrl: 'app/hero-form.component.html',
  styleUrls: ['app/bootstrap.css'], //Bootstrap 4 CSS file
  encapsulation: ViewEncapsulation.Native
})
export class HeroFormComponent {}

并且在 index.html 中加载了 Bootstrap 3:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">

问题是，当包含 Bootstrap 3 时，它会使一切变得非常小。你可以在我的 Plunker: Angular 2 ViewEncapsulation.Native with Bootstrap 3 and Bootstrap 4 中看到它的样子.当注释 Bootstrap 3 时，一切看起来都更好。我想这个问题的发生是因为 Bootstrap 4 使用 rem 来设置按钮的样式:

.btn {
    display: inline-block;
    font-weight: normal;
    line-height: 1.25;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid transparent;
    padding: 0.5rem 1rem;
    font-size: 1rem;
    border-radius: 0.25rem;
}

与 Bootstrap 4 ，rem，作为root em，对于html标签设置为16px:

html {
  font-size: 16px;
  -ms-overflow-style: scrollbar;
  -webkit-tap-highlight-color: transparent;
}

但是Bootstrap 3.3.6将其设置为 10px:

html {
  font-size: 10px;

  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

因为 Bootstrap 4 样式包含在 Shadow DOM 中，所以它们不适用于 HTML(这很好)。但正因为如此，我的组件的样式将使用 10px 作为 rem 而不是 16px。我尝试为组件本身及其 View 中的第一个元素设置样式:

@Component({
  selector: 'hero-form',
  templateUrl: 'app/hero-form.component.html',
  styleUrls: ['app/bootstrap.css'],
  styles: ['hero-form, #parent-element {font-size: 16px;}'],
  encapsulation: ViewEncapsulation.Native
})
export class HeroFormComponent {}

但是没有用。我认为默认情况下它应该以这种方式工作——如果 rem 对于每个 Shadow DOM 都是相同的，它将在一个元素中拥有多个 CSS 框架(并且它可能非常有用，例如用于迁移从 Bootstrap 3 到 Bootstrap 4)非常困难。是否可以为不同的 Web 组件设置不同的 rem，而不更改 Bootstrap 文件以不使用 rem？提前感谢您的帮助。

Answer 1

我认为没有办法改变 rem 但你可以利用这样的东西:

@Component({
  selector: 'hero-form',
  templateUrl: 'app/hero-form.component.html',
  styleUrls: ['app/bootstrap.css', 'app/my.css'],

我的.css

.btn {font-size: 16px;}
.form-control { font-size: 14px;}

另见 plunkr https://plnkr.co/edit/ZlEZ7230O6SzRjNRyRvN?p=preview