【问题标题】:component css / scss is not affecting element class in angular2组件 css / scss 不影响 angular2 中的元素类
【发布时间】:2018-06-22 13:03:49
【问题描述】:

我正在开发一个 Angular 4 项目,我正在尝试覆盖特定组件中的 css。我的更改在编译后也会显示出来,但它们不会影响元素。该元素位于父组件中,但我已经尝试使用 :host。

元素:

生成的 CSS:

【问题讨论】:

  • 您的选择器确实应该针对有问题的元素。您是否确保它没有被具有更高特异性的选择器作为目标?另外,您是否尝试过使用 CTRL + F5 手动重新加载样式表,并通过按住 SHIFT 并单击刷新图标来刷新 CSS 缓存?
  • 是的,我也使用了不同的浏览器。 .main 来自父组件,但正如您所见,我的自定义样式是在加载原始样式后加载的,所以应该覆盖
  • 你能用类名代替 Angular 属性吗?我会推荐,甚至可能是数据属性
  • 您是否尝试过使用 !important 关键字。
  • 我用classes,生成angular属性。我也使用了 !important。

标签: css angular sass parent


【解决方案1】:

我遇到了同样的问题,我发现您可以从其父组件设置您的子组件的样式。生成的 css 永远不会匹配你想要的。看图片。 我通过将状态信息(扩展的@input attr)传递给子组件并根据此状态值对其进行样式设置来解决它:

Image illustrating my point

...

【讨论】:

  • 也许把你的代码直接放在这里而不是图片中
  • 这种方法不适用于可重用组件。您需要能够为可重用组件编写一次样式,而不是使用它的每个父级。
猜你喜欢
  • 2016-07-08
  • 1970-01-01
  • 2018-12-25
  • 2020-07-13
  • 2013-08-01
  • 2013-12-11
  • 2011-08-05
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多