nwb可重用组件上的样式化组件未生成样式表

Question

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

src文件夹为：

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

FadePreloader.js：

import React, {Component} from "react"

class FadePreloader extends Component {
  // logic code
}

export default FadePreloader

FadePreloader.Styled.js：

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

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

export default FadePreloader_Styled

index.js：

// just import the styled-componet and re-export it
import FadePreloader from "./FadePreloader.Styled"

export default FadePreloader

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

​

FadePreloader是在npm上发布的，所以我(通过yarn add fade-preloader)将它添加到了其他项目中，并像这样使用它：

其他项目上的App.jsx：

// lots of imports here
import FadePreloader from "fade-preloader"

class App extends Component {
  render() {
    return(
      <div>
        <FadePreloader />
      </div>
    )
  }
}

export default App

FadePreloader组件在DOM中呈现，并且它的className属性将样式化组件生成的样式作为预期，但样式表从未添加到DOM中，没有出现<style>元素，从而导致呈现未样式化的FadePreloader。怎么了？

Answer 1

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

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