Question

我正在设计浏览器扩展应用程序的样式，但是当我尝试以firefox或chrome的调试模式将其加载到浏览器中时，没有应用任何CSS样式。我的朋友似乎在他的计算机上没有这个问题。当我执行“检查元素”时，可以在调试控制台中更改样式。

    let navItemClasses = 'navItemClass'
    let activeNavItemClasses = 'activeNavItemClass'    
    <header className="mainHeader">
                  </header>
                  <nav className="navBar">
                    <a
                      className={
                        navItemClasses +
                        (selectedMenu === HOME ? activeNavItemClasses : '')
                      }
                      data-action={HOME}
                      onClick={navigate}
                    >
                      Home
                    </a>
                  </nav>
    </header>

    ## style.css

    .mainHeader {
        background-color: var(--second-background);
        height: 100px;
    }


    .navBar {
        display: flex;

    }

    .navItemClass {
        background-color: var(--second-background);
        flex-grow: 1;
        padding: 1rem 1rem;
        color: var(--headline-color);
        font-size: .8rem;
    }

    .activeNavItemClass {
        flex-grow: 1;
    }

Answer 1

将CSS代码放入<style>元素内，该元素放在HTML文件的标头元素内。这样，您将不需要链接文件。：）

Answer 2

它可能对谁感兴趣：

通过全新安装的Ubuntu 18修复了该问题：/

在调试模式下加载浏览器扩展时未应用CSS样式（reactjs）

2 个答案: