所有组件的角度全局css

Question

我有一个单独的html文件和一个css文件，我想将其转换为angular 2 way =＆gt;将文档中的一些对象分离到不同的组件...所以我创建了一个角度应用程序和组件，我不想在我的全局css文件中更改任何内容。

我正在尝试将“index.html”中的全局​​css应用于我的所有子组件，但似乎每个组件都使用相对于自身的css。 我的意思是，例如，如果在我的“all.css”文件中我有这些行：

.col-lg-3 {
   width: 25%;
}

在我的子组件中，25％的宽度将相对于组件宽度而不是我的文档＆lt;身体＆gt;宽度... 这将导致我的组件占身体的25％，但我的组件的内部对象将是25％的25％......

我该怎么办？

由于

编辑：

我试图实现的是每个css元素将相对于＆lt;身体＆gt;文档的标记而不是父元素... 例如： 我有3个组成部分：

App - ＆gt; 家长 - ＆gt; 子

我希望Child的组件元素宽度百分比相对于App组件而不是父组件...

Answer 1

由于没有提供代码，我不完全理解你要做的事情。但是，根据您希望实现的目标，有许多解决方案。

（a）您可以将div移动到当前父级之外，也可以为内部div定义特定宽度。

（b）如果您只需要根据主要内容区域始终拥有内部div的宽度，则可以使用视口宽度

.col-lg-3 {
   width: 25vw;
}

这会将宽度设置为视口宽度的25％

（c）如果需要在运行期间动态更改宽度并且需要更改特定元素，则可以在Body加载后捕获视口宽度，并使用

更改内部div的宽度

document.getElementById('elementsId').style.width = 0.25 * window.innerWidth + 'px' //you can use screen.width also

（d）使用less.js，允许您在运行时动态更改CSS类。有关详细信息，请参阅http://lesscss.org/

在少量CSS中添加此

@myinnerWidth:25%
.col-lg-3 {
   width: @myinnerWidth
}

然后在你的控制器中动态更改myinnerWidth

less.modifyVars({
  '@myInnerWidth': 0.25 * screen.width + 'px'
});