-1

我已经完成了我的第一个 Gatsby 应用程序，它将很快投入生产。这是链接：https ://majiid-landing-page.vercel.app/

我在整个应用程序中都使用了样式化组件，我通常采用SCSSwithBEM方法，但我想尝试这种CSS in JS方法。

问题是页面首先在几分之一秒内出现无样式，然后样式被解析，就像那些被注入的一样JS，而样式实际上是在盖茨比使用的 HTML 中SSR。

这是正常的行为吗？

我不确定如何重现整个内容，因为无论如何我正在使用的 repoGlobalStyles以及每个组件中的特定样式都是私有的。

以下是一些片段：

全局样式

import React from "react";

import Abstracts from "./abstracts/abstracts";
import Base from "./base/base";
import Utils from "./utils/utils";

const GlobalStyles = () => {
  return (
    <>
      <Abstracts />
      <Base />
      <Utils />
    </>
  );
};

export default GlobalStyles;

全局样式创建示例：

import { createGlobalStyle } from "styled-components";

export default createGlobalStyle`
  :root {
      // COLORS
    --body-background: #ffffff;
  }
`;

盖茨比 SSR

// gatsby-ssr.js
const React = require("react");
require("./src/scss/index.scss");
const GlobalStyles = require("./src/styles/global-styles").default;
const Layout = require("./src/layout/Layout").default;

exports.wrapRootElement = ({ element }) => {
  return (
    <>
      <GlobalStyles />
      <Layout>{element}</Layout>
    </>
  );
};

盖茨比浏览器.js

const React = require("react");
require("./src/scss/index.scss");
const GlobalStyles = require("./src/styles/global-styles").default;
const Layout = require("./src/layout/Layout").default;

exports.wrapRootElement = ({ element }) => {
  console.log("Running this");
  return (
    <>
      <GlobalStyles />
      <Layout>{element}</Layout>
    </>
  );
};

盖茨比配置（摘录）：

plugins: [
    "gatsby-plugin-styled-components",
...

package.json 依赖项

"dependencies": {
    "@vimeo/player": "^2.16.0",
    "babel-plugin-styled-components": "^1.13.2",
    "bootstrap": "^5.1.0",
    "gatsby": "^3.11.1",
    "gatsby-plugin-image": "^1.11.0",
    "gatsby-plugin-react-helmet": "^4.11.0",
    "gatsby-plugin-sass": "^4.11.0",
    "gatsby-plugin-sharp": "^3.11.0",
    "gatsby-plugin-sitemap": "^4.7.0",
    "gatsby-plugin-styled-components": "^4.11.0",
    "gatsby-plugin-webfonts": "^2.1.1",
    "gatsby-source-contentful": "^5.11.1",
    "gatsby-source-filesystem": "^3.11.0",
    "gatsby-transformer-sharp": "^3.11.0",
    "node-sass": "^6.0.1",
    "normalize.css": "^8.0.1",
    "polished": "^4.1.3",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-helmet": "^6.1.0",
    "react-icons": "^4.2.0",
    "react-responsive": "^9.0.0-beta.3",
    "styled-components": "^5.3.0"
  }
4

2 回答 2

1

它被称为FOUC（Flash Of Unstyled C内容），不，这不是“正常”行为，但使用样式组件很常见。

如果没有进一步的细节，就不可能猜测出什么可能出错或配置错误，但通常可以通过以下方式修复：

  • 安装所有必需的插件：

    npm install gatsby-plugin-styled-components styled-components babel-plugin-styled-components

  • 在您的gatsby-config.js：

    {
   resolve: `gatsby-plugin-styled-components`,
   options: {
      // Add any options here
   },
},

  • 包装你GlobalStyles的Layout组件。就像是：

    import React from "react"
import { createGlobalStyle } from "styled-components"

const GlobalStyle = createGlobalStyle`
   body {
     color: ${props => (props.theme === "purple" ? "purple" : "white")};
   }
`
export default function Layout({ children }) {
   return (
     <>
       <GlobalStyle theme="purple" />
       {children}
     </>
   )
}

    https://www.gatsbyjs.com/docs/how-to/styling/styled-components/上的其他实现细节

  • 作为最后一点的替代方案，您可以在and中使用wrapPageElementAPI （这两个文件，这很重要）。gatsby-ssr.jsgatsby-browser.js

于 2021-08-19T08:33:08.363 回答
0

这已经成功了： https ://www.youtube.com/watch?v=G_dVwrhvkBI

基本上，全局样式必须应用在 wrapPageElement 挂钩中，而不是 wrapRootElement 挂钩中。

如果其他人搜索 SO 来处理这个问题，我会把它留在这里。

于 2021-08-19T14:38:15.733 回答