没有由nwb可重用组件上的样式组件生成的样式表

Question

我通过名为nwb new react-component fade-preloader的{​​{1}}构建了一个可重用的反应组件，它使用样式组件，它在npm上发布，所以我可以在其他项目中使用它，但当它作为模块导入时样式永远不会添加到DOM中。以下提供了有关nwb组件的更多详细信息。

src文件夹是：

FadePreloader

FadePreloader.js：

src/
  FadePreloader.js
  FadePreloader.Styled.js
  index.js

FadePreloader.Styled.js：

import React, {Component} from "react"

class FadePreloader extends Component {
  // logic code
}

export default FadePreloader

index.js：

import styled from "styled-components"
import FadePreloader from "./FadePreloader"

const FadePreloader_Styled = styled(FadePreloader)`
  // css here
`

export default FadePreloader_Styled

我在nwb提供的package.json中有默认配置：

FadePreloader在npm上发布，所以我将它添加到其他项目（通过// just import the styled-componet and re-export it import FadePreloader from "./FadePreloader.Styled" export default FadePreloader ）并使用它：

其他项目的App.jsx：

yarn add fade-preloader

FadePreloader组件在DOM中呈现，其class属性具有由styled-components生成的className，但样式表从未添加到DOM中，不存在// lots of imports here import FadePreloader from "fade-preloader" class App extends Component { render() { return( <div> <FadePreloader /> </div> ) } } export default App 元素，导致呈现无样式的FadePreloader。怎么了？

Answer 1

我找到了一个来自样式组件官方频谱频道的解决方案，see here。

我要做的就是遵循this，这基本上说需要将样式组件依赖项从依赖项移动到package.json中的devDependencies和peerDependencies。我不确定原因，但似乎是为了避免由样式组件的重复直接依赖产生的一些意外原因。