如何创建样式组件库包以使用 Gatsby答案

【问题标题】：How to create a styled-component library package to work with Gatsby如何创建样式组件库包以使用 Gatsby
【发布时间】：2020-12-02 08:02:30
【问题描述】：

我正在尝试创建一个样式化的组件库包，以便我可以将我的样式重复用于不同的项目。

为了测试如何做到这一点，我有两个项目。

ExampleStyledComponent - 我正在尝试构建我的组件。
Gatsby 项目 - 一个简单的“Gatsby new .”。项目

我设法使用“npm 链接”让我的测试组件在浏览器中正确显示，但是当我应用样式时，我不断在浏览器中收到“无效的钩子调用”错误。

包-

- src
    - TestComponent.js
- index.js
- package.json

TestComponent.js -

import React from 'react';
import styled from 'styled-components';

const Container = styled.div`
    width: 100%;
    background-color: red;
`;

const TestComp = () => {
    return (
        <Container>
            <h1>Hello World</h1>
        </Container>
    );
};

export default TestComp;

index.js -

import TestComponent from './src/TestComponent';

export default TestComponent;

package.json -

{
    "name": "ExampleStyledComponent",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "peerDependencies": {
        "react": "16.x",
        "styled-components": "5.x"
    },
    "dependencies": {},
    "devDependencies": {
        "babel-plugin-styled-components": "^1.11.1",
        "react": "^16.13.1",
        "styled-components": "^5.1.1"
    }
}

没有样式组件，此设置可以正常工作。那么如何让样式化的组件在我的 npm 包中工作。我也尝试在我的 Gatsby 项目中安装依赖项，但没有成功。

在我的 Gatsby 项目依赖项中 -

    "dependencies": {
        "babel-plugin-styled-components": "^1.11.1",
        "gatsby": "^2.24.42",
        "gatsby-image": "^2.4.15",
        "gatsby-plugin-manifest": "^2.4.22",
        "gatsby-plugin-offline": "^3.2.23",
        "gatsby-plugin-react-helmet": "^3.3.10",
        "gatsby-plugin-sharp": "^2.6.26",
        "gatsby-plugin-styled-components": "^3.3.10",
        "gatsby-source-filesystem": "^2.3.24",
        "gatsby-transformer-sharp": "^2.5.12",
        "prop-types": "^15.7.2",
        "react": "^16.12.0",
        "react-dom": "^16.12.0",
        "react-helmet": "^6.1.0",
        "styled-components": "^5.1.1"
    },

和 gatsby-config.js

module.exports = {
    siteMetadata : {
        title       : `Gatsby Default Starter`,
        description : `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
        author      : `@gatsbyjs`
    },
    plugins      : [
        `gatsby-plugin-styled-components`,
        `gatsby-plugin-react-helmet`,
        {
            resolve : `gatsby-source-filesystem`,
            options : {
                name : `images`,
                path : `${__dirname}/src/images`
            }
        },
        `gatsby-transformer-sharp`,
        `gatsby-plugin-sharp`,
        {
            resolve : `gatsby-plugin-manifest`,
            options : {
                name             : `gatsby-starter-default`,
                short_name       : `starter`,
                start_url        : `/`,
                background_color : `#663399`,
                theme_color      : `#663399`,
                display          : `minimal-ui`,
                icon             : `src/images/gatsby-icon.png`
    ]
};

我如何将它导入 Gatsby index.js 页面 -

import React from 'react';
import Test from 'examplestyledcomponent';

const IndexPage = () => (
    <div>
        <Test />
    </div>
);

export default IndexPage;

我在浏览器中遇到的错误如下所示 -

我真的很迷茫，所以任何帮助都将不胜感激，谢谢！

【问题讨论】：

标签： reactjs npm gatsby

【解决方案1】：

由于 SSR 限制，Gatsby 需要一个插件来支持样式组件

他们的文档详细介绍：https://www.gatsbyjs.org/docs/styled-components/

简短的版本是将其添加到您的 Gatsby 网站：

npm i gatsby-plugin-styled-components styled-components babel-plugin-styled-components

那么，在gatsby-config.js:

module.exports = {
  plugins: [
    'gatsby-plugin-styled-components',
  ]
};

这应该让你启动并运行！

【讨论】：