web-dev-qa-db-ja.com

モジュールが見つかりません： 'styled-component'を解決できません

_create-react-app_を使用して新しいReact Appを作成し、npmを使って_styled-component_をインストールしました。しかし、それをコンポーネントで使用するときは、次のエラーが発生しています。

コンパイルに失敗しました。 ./src/components/lightbox/styledlightbox.js.

モジュールが見つかりません：

'styled-component' in '/ users/ishan/documents/react-app/src/components/lightbox'を解決できません

以下はコンポーネントです。

_import React, { Component } from 'react';
import { LightboxWrapper } from './styledLightbox';

class Lightbox extends Component {

    renderEntry() {
        if (this.props.lightbox.type === "photo") {
         return  <img alt="name" src={this.props.lightbox.entry} />;
        } 
        if (this.props.lightbox.type === "video") {
        return <video src={this.props.lightbox.entry} onLoadedMetadata={(e) => {console.log("Video duration is: "+e.currentTarget.duration) } } autoPlay muted onEnded={() => console.log("Video ended")} width='100%' height='100%' ></video> 
        }
        if(this.props.lightbox.type === "text"){
        return <div> <p className="lightbox text"> {this.props.lightbox.entry} </p> </div>   
        }

    }

    render() {
        let classList = this.props.lightbox.status === true ? "lightbox-wrapper active" : "lightbox-wrapper";
        return ( 
                <LightboxWrapper className={classList}>
                    {/* {this.renderEntry()} */}
                </LightboxWrapper>
         );
    }
}

export default Lightbox;
_

以下は、他のコンポーネントで使用するために作成されたスタイルのコンポーネントです。

_import styled from "styled-component";

export const LightboxWrapper = styled.div`
      display: none;
        position: fixed;
        z-index: 100;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background: radial-gradient(
                center, 
                ellipse farthest-corner, 
                rgba(255,255,255,0) 0%,
                rgba(255,255,255,0) 100%
        );
    .active {
        display: block;
        background: radial-gradient(
            center, 
            ellipse farthest-corner, 
            rgba(255,255,255,0.5) 0%,
            rgba(255,255,255,0.1) 100%
    );
    }
    .active img, .active video {
        max-width: 70%;
        height: auto !important;
        margin: 0 auto;
        opacity: 1;
        /* box-shadow: 0px 2px 7px rgba(0,0,0,0.2); */
        transition: opacity 0.5s linear;
        animation: fadeInScale 1.2s ease-in-out;
        max-height: 70%;
        width: auto !important;
        position: relative;
        top: 11%;
}
`;
_
javascriptreactjsstyled-components
8
Ishan Patel

NPMにそのようなスタイルのコンポーネントはありません。ここではSは最後にありません

スタイルのコンポーネントをインストールする必要があります

  npm i styled-components
 _
6
Hemadri Dasari