Question

我正在尝试创建一个npm包-一个UI组件。

假设我有一个名为fancy-web的项目，而npm软件包名为fancy-components。

在fancy-web中，我包括在package.json

中

"fancy-components": "^0.0.1"

（换句话说，fancy-web将消耗fancy-components）。

在fancy-web中，我有

// ...
import { ThemeProvider } from 'styled-components';
import { Testing } from 'fancy-components';

// ...

return (
  <ThemeProvider theme={theme}>
    <Testing />
  </ThemeProvider>
)

问题在这里

在我的fancy-components 测试组件中，如果我在做

If I'm doing something trivial like this in the Testing component, I will get an error

Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

---

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

const Container = styled.div`
  margin-top: 40px;
`;

function Testing(props: Props): JSX.Element {
  return (
    <Container>
      <div>Testing</div>
    </Container>
  );

}

export default Testing;

However, the following works if my "Testing" component just like that. 

The following is the `Testing` code

---

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



function Testing(props: Props): JSX.Element {
  return (
     <div>Testing</div>
  );

}

export default Testing;

不知道这里出了什么问题，对您的帮助表示感谢。

Answer 1

事实证明是因为我正在进行链接而导致问题。将其推出而不是进行链接后，一切正常。

在npm包中使用样式化组件时出现奇怪的问题

1 个答案: