CODEWITHSUNDEEP
node.jsreactjs
Ranindu
Ranindu

Reputation: 1063

In new React version, how to fix TypeError: styled_components__WEBPACK_IMPORTED_MODULE_3__.default.dev?

Compiled successfully, but in Chrome browser show this error:

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

Here is my code:

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;

Upvotes: 2

Views: 1907

Answers (1)

ravibagul91
ravibagul91

Reputation: 20755

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

Your component should be like this,

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>
)

For more about styled-components refer this.

Upvotes: 2

Related Questions