reactjs - 如何创建样式化组件库包以与 Gatsby 一起使用

Question

我正在尝试创建一个样式化的组件库包，以便我可以为不同的项目重用我的样式。
为了测试如何做到这一点，我有两个项目。

ExampleStyledComponent - 我试图构建我的组件的地方。

Gatsby 项目 - 一个简单的“Gatsby new .”项目

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

- 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-package.js 中工作？我也尝试在我的 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;

我在浏览器中遇到的错误是这样的 -


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

Answer 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',
  ]
};

这应该让你开始运行!