javascript - 未找到模块:无法解析“样式组件”
问题描述
我使用创建了一个新的反应应用程序create-react-app
,然后styled-component
使用npm
. 但是当我在组件中使用它时,我得到了以下错误。
编译失败。./src/Components/Lightbox/styledLightbox.js
未找到模块:
无法解析“/Users/ishan/Documents/react-app/src/Components/Lightbox”中的“styled-component”
以下是组件:
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%;
}
`;
解决方案
您在“样式组件”末尾缺少“s”
$ npm i styled-components
推荐阅读
- python - 从索引到熊猫数据框中的字段名称
- java - 遍历 Frida 中的列表
- strapi - 统计所有用户
- java - 在矩阵中查找单元格的相邻元素
- python - 在所有列中创建具有特定值计数的新列(例如,类似于 COUNTIF)?
- virtual-keyboard - 在 ansi 风格的键盘中,上面输入的反斜杠的 vk 代码是什么
- c++ - 是否可以使用 Google Mock 模拟“pthread_mutex_lock”?
- javascript - 为什么 momentjs 以错误的方式转换时区?
- javascript - 无法将变量传递给 Paypal Smart Button api 的值
- java - 查询以获取按列的不同属性排序的所有对象?