外部样式表无法加载，但内联CSS在Firefox插件中有效

Question

我正在使用ReactJS进行Firefox扩展。这里的问题是，我需要对JSX表达式进行样式设置以呈现按钮，并且尝试使用外部样式表（也是模块），但是仅显示默认的html按钮。这是CSS。

.containerButton{
flex: 1;
justify-content: 'center';
align-items: 'center';
background-color: 'inherit';
}

.pingButton {
    padding: 15;
    height: 100;
    width: 100;  
    border-radius:200;    
    background-color: 'rgb(0,0,128)';
    opacity: 0.2;
};

这是 render（）方法。

render(){
    const rtt = this.state.rtt ;
    let buttonText ;
    if (rtt){
        buttonText = rtt;
    }
    else {
        buttonText = "Ping here!";
    }
    console.log(buttonText);
    return(
        <div className="containerButton">
            <button className="pingButton" onClick={this.pingOnClick}> {buttonText}
        </button></div>
    );

}

我也导入了CSS，所以这不是问题。可能值得注意的是，我将INLINE_RUNTIME_CHUNK变量设置为false，以避免内联脚本出现内容安全策略问题。

但是，当我使用内联样式时，在 render（）方法中将样式定义为常量，则按钮将被适当地设置样式。我只能使用内联样式，但是我需要捕获一些浏览器状态，例如：hover ，对于它们来说，外部样式表会更方便。