在 gatsby 构建期间无法读取样式化组件的主题属性

Posted 2023-03-15

【中文标题】在 gatsby 构建期间无法读取样式化组件的主题属性

【英文标题】：Cannot read theme properties of styled-components during gatsby build

【发布时间】：2021-08-01 22:25:01

【问题描述】：

我正在尝试在 Gatsby 中构建一个使用 styled-components 样式的网站。

运行gatsby develop 显示页面正常，但是当我尝试构建页面时，出现以下错误：

错误

Building static html failed for path "/Page/"

See our docs page for more info on this error: https://gatsby.dev/debug-html


  16 |     font-family: Lack;
  17 |     text-align: center;
> 18 |     background: $(props) => props.theme.colors.purple;
     |                                                 ^
  19 |     color: $(props) => props.theme.colors.white;
  20 |   
  21 | `;


  WebpackError: TypeError: Cannot read property 'purple' of undefined

Layout.jsx

import React from 'react';
import  ThemeProvider, createGlobalStyle  from 'styled-components';
import theme from '../theme/theme';

const GlobalStyle = createGlobalStyle`
  * 
    @import url('Lack-Regular.otf');
  
  body 
    margin: 0px;
  
`;

const Layout = ( children ) => (
  <>
    <GlobalStyle theme=theme />
    <ThemeProvider theme=theme>
      children
    </ThemeProvider>
  </>
);

export default Layout;

Toast.jsx

/* eslint-disable react/jsx-props-no-spreading */
import React from 'react';
import  ToastContainer, Bounce  from 'react-toastify';
import styled from 'styled-components';
import 'react-toastify/dist/ReactToastify.css';

const WrappedToastContainer = ( className, ...rest ) => (
  <div className=className>
    <ToastContainer ...rest />
  </div>
);

const StyledContainer = styled(WrappedToastContainer).attrs(
)`
  .Toastify__toast 
    font-family: Lack;
    text-align: center;
    background: $(props) => props.theme.colors.purple; // theme props undefined here.
    color: $(props) => props.theme.colors.white;
  
`;

const Toast = () => (
  <StyledContainer
    closeButton=false
    position="bottom-center"
    autoClose=3000
    hideProgressBar
    newestOnTop=false
    closeOnClick=false
    rtl=false
    pauseOnFocusLoss=false
    draggable=false
    pauseOnHover=false
    transition=Bounce
  />
);

export default Toast;

盖茨比信息 --clipboard

  System:
    OS: macOS 11.3.1
    CPU: (8) arm64 Apple M1
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.1.0 - ~/.nvm/versions/node/v16.1.0/bin/node
    npm: 7.11.2 - ~/.nvm/versions/node/v16.1.0/bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  Browsers:
    Firefox: 88.0.1
    Safari: 14.1
  npmPackages:
    gatsby: ^3.4.1 => 3.4.2
    gatsby-plugin-react-helmet: ^4.4.0 => 4.4.0
    gatsby-plugin-styled-components: ^4.4.0 => 4.4.0
  npmGlobalPackages:
    gatsby-cli: 3.4.1

gatsby-config.js

module.exports = 
  siteMetadata: 
    title: 'AddisonWebsite',
  ,
  plugins: [
    
      resolve: 'gatsby-plugin-styled-components',
      options: 
        // Add any options here
      ,
    ,
  ],
;

package.json

  "name": "addison-website",
  "version": "1.0.0",
  "private": true,
  "description": "AddisonWebsite",
  "author": "Addison",
  "keywords": [
    "gatsby"
  ],
  "scripts": 
    "develop": "gatsby develop",
    "start": "gatsby develop",
    "build": "gatsby build",
    "serve": "gatsby serve",
    "clean": "gatsby clean"
  ,
  "dependencies": 
    "@material-ui/core": "^4.11.4",
    "babel-plugin-styled-components": "^1.12.0",
    "gatsby": "^3.4.1",
    "gatsby-plugin-react-helmet": "^4.4.0",
    "gatsby-plugin-styled-components": "^4.4.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-feather": "^2.0.9",
    "react-helmet": "^6.1.0",
    "react-toastify": "^7.0.4",
    "styled-components": "^5.3.0"
  ,
  "devDependencies": 
    "eslint": "^7.26.0",
    "eslint-config-airbnb": "^18.2.1",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-react": "^7.23.2",
    "eslint-plugin-react-hooks": "^4.2.0"
  

这个错误对我来说相当新，因为我已经使用 Gatsby + styled-components 有一段时间了，而且我的构建通常可以在上述设置下正常工作。我什至有一个我最近建立的网站，其中包含与上述几乎相同的文件。

我知道这可能与 s-s-r 有关，但我不确定上面有什么问题。

如何在主题提供者正确传递道具的情况下使用gatsby build 构建我的网站？

【参考方案1】：

您可能使用gatsby-browser.js 中的wrapRootElement API 提供了主题。在构建期间，Gatsby 将改为执行来自gatsby-s-s-r.js 的代码。这也解释了in the Gatsby docs。

在大多数情况下，只需将所有代码从 gatsby-browser.js 复制到 gatsby-s-s-r.js 或将通用代码移动到另一个文件并将其导入两个 API 文件中就足够了。