0

I've built a reusable react component through nwb new react-component fade-preloader called FadePreloader which uses styled-components, its published on npm so I can use it on other projects, but when its imported as a module its styles are never added to the DOM. The following provides more details about the nwb component.

src folder is:

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

I have the default configuration in package.json provided by nwb: enter image description here

FadePreloader is published on npm so I added it on other project (through yarn add fade-preloader) and use it like this:

App.jsx on other project:

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

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

export default App

The FadePreloader component is rendered in the DOM and its class attribute has the className generated by styled-components as espected but the stylesheet is never added to the DOM, no <style> element is present causing an unstyled FadePreloader rendered. What's wrong?

4

1 回答 1

1

我找到了来自 styled-components 官方频谱频道的解决方案，请参见此处。

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

于 2018-04-07T23:33:30.880 回答