尝试使用 typescript 插入 css 规则时出现 CSSStyleSheet 类型问题

Question

我尝试使用基于 https://www.w3.org/wiki/Dynamic_style_-_manipulating_CSS_with_JavaScript 的 typescript 插入一个 css 规则.无法识别方法 insertRule。我有以下错误:

Type 'StyleSheet' is not assignable to type 'CSSStyleSheet'. Property 'cssRules' is missing in type 'StyleSheet'.

这是我的代码:

let stylesheet: CSSStyleSheet = document.styleSheets[0];
stylesheet.insertRule(".scroll-content { overflow: hidden;}",0);

我正在使用 ionic 2 和 angular 2。

Answer 1

尝试使用此代码段来定义您的样式表，对 this answer 稍作修改.

if (document.styleSheets[0].cssRules)
    let stylesheet: CSSStyleSheet = document.styleSheets[0].cssRules[0];
else if (document.styleSheets[0].rules)
    let stylesheet: CSSStyleSheet = document.styleSheets[0].rules[0];