代码之家  ›  专栏  ›  技术社区  ›  assembler

未捕获的TypeError:对象(…)不是eval(global styles.js)上的函数

  •  2
  • assembler  · 技术社区  · 6 年前

    我将我的项目从react样板文件3.5.0迁移到3.7.0。样板文件结构发生了一些变化,我需要更新一些依赖项,但最终webpack编译没有错误。

    enter image description here

    这是报告的内容 global-styles.js 文件:

    import { injectGlobal } from 'styled-components';
    
    /* eslint no-unused-expressions: 0 */
    injectGlobal`
      html,
      body {
        height: 100%;
        width: 100%;
      }
    
      body {
        font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
      }
    
      body.fontLoaded {
        font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
      }
    
      #app {
        background-color: #3892d3;
        min-height: 100%;
        min-width: 100%;
      }
    
      p,
      label {
        font-family: Georgia, Times, 'Times New Roman', serif;
        line-height: 1.5em;
      }    
      
      .row {   
        margin: 0px;
        padding: 0px;
      }
      
      .main .container-fluid {
        padding: 0px 6px 0px 6px;
        margin: 0px ;
        height: 100%;
        min-width: 440px;
        // background: #ffffff;
        // height: calc(100% - 5px);
      }
      
      .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col,
      .col-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm,
      .col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md,
      .col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg,
      .col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl,
      .col-xl-auto {
        position: relative;
        width: 100%;
        min-height: 1px;
        padding-right: 5px;
        padding-left: 5px;
      }
    `;
    

    我试着删除这个文件并注释对它的引用,但问题是我不知道如何解决这个问题,因为它在升级之前工作得很好。

    关于如何解决这个问题有什么线索吗?

    1 回复  |  直到 4 年前
        1
  •  3
  •   kind user Faly    6 年前

    React样板文件3.7.0不使用 styled-components 样式化组件 v4不使用 injectGlobal createGlobalStyle 应用程序编程接口。你收到的错误是因为没有类似的东西 注入全球 .

    正如文件所说:

    const GlobalStyles = createGlobalStyle`
      html {
        color: 'red';
      }
    `;
    
    // then put it in your React tree somewhere:
    // <GlobalStyles />