node.js - 在新的React版本中，如何修复TypeError : styled_components__WEBPACK_IMPORTED_MODULE_3__. default.dev？

Question

编译成功，但在Chrome浏览器中显示此错误:

TypeError: styled_components__WEBPACK_IMPORTED_MODULE_3__.default.dev is not a function`

这是我的代码:

import {Jumbotron as Jumbo ,Container} from 'react-bootstrap';
import styled from 'styled-components';
import artImg from '../asset/artImg.jpg';

const Style = styled.dev`
  .jumbo{
    background: url(${artImg}) no-repeat fixed bottom;
  }

  .overlay{
    background-color: #000;
    z-index: -1;
  }
`;

export const Jumbotron = () => (
  <Style>
    <Jumbo fluid className="jumbo">
      <div className="overlay"></div>
        <Container>

        </Container>
      </Jumbo>
    </Style>
  )

import {NavBar} from './components/NavBar';
import {Jumbotron} from './components/Jumbotron';


class  App extends Component {
  render(){
    return (
      <React.Fragment>
      <NavBar/>
        <Jumbotron/>
        <Router>
          <Switch>

          </Switch>
        </Router>


      </React.Fragment>
    );
  }
  }


export default App;

Answer 1

styled-components allows you to write actual CSS code to style your components.

你的组件应该是这样的，

import {Jumbotron as Jumbo ,Container} from 'react-bootstrap';
import styled from 'styled-components';
import artImg from '../asset/artImg.jpg';

//This will create a div with brackground image
const Style = styled.div`
    background: url(${artImg}) no-repeat fixed bottom;
 `;

//This will create a div with background-color black & z-index  -1.
const Overlay = styled.div`
    background-color: #000;
    z-index: -1;
`;

export const Jumbotron = () => (
   <Style>  //This will be replaced by div with brackground image
    <Jumbo fluid className="jumbo">  
      <Overlay className="overlay"></Overlay>  //This will be replaced by div with background-color black & z-index  -1.
        <Container>

        </Container>
    </Jumbo>
   </Style>
)

有关样式组件的更多信息，请参阅this .