Внешняя таблица стилей не загружается, но встроенный CSS работает в аддоне Firefox - PullRequest
Новая
       41

Внешняя таблица стилей не загружается, но встроенный CSS работает в аддоне Firefox

0 голосов
/ 16 октября 2019

Я делаю расширение Firefox с ReactJS. Проблема здесь в том, что мне нужно стилизовать выражение 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 , для которых внешние таблицы стилей были бы более удобными.

...