javascript - 样式组件不导出
问题描述
错误:./src/card.js 尝试导入错误:“底部”未从“./styles/cards.style”导出。
卡片.js
import React from 'react'
import {
Bottom,
Color,
Text,
Image
} from "./styles/cards.style";
function Card(props) {
return (
<div>
<Bottom>
<Color />
<Text>{props.text}</Text>
<Text>{props.text}</Text>
</Bottom>
<Image
alt=""
src={props.image}
/>
</div>
);
}
export default Card;
卡片样式
import styled from "styled-components";
export default {
colors: {
black: "rgba(0,0,0,1)",
brandPrimary: "rgba(238,120,36,1)",
brandPrimaryLight: "rgba(255,184,8,1)",
brandTertiary: "rgba(0,65,125,1)",
darkSlateGray: "rgba(51,51,51,1)",
white: "rgba(255,255,255,1)"
},
fonts: {
uiMainContent: {
family: "Poppins",
size: "15px",
weight: "300",
lineHeight: "21px"
},
uiSubContent: {
family: "Poppins",
size: "13px",
weight: "300",
lineHeight: "20px"
}
}
};
export const Bottom = styled.div`
width: 100%;
height: calc(100% - 20px);
background-color: ${props => props.theme.colors.white};
border-radius: 4px;
padding: 0 0 20px;
display: flex;
flex-direction: column;
align-items: flex-start;
position: relative;
`;
export const Color = styled.div`
height: 120px;
background-color: ${props =>
props.theme.colors.brandPrimary};
margin-bottom: 16px;
border-radius: 4px 4px 0px 0px;
align-self: stretch;
`;
export const Text = styled.p`
color: ${props => props.theme.colors.black};
margin-left: 16px;
letter-spacing: 0.1px;
font-family: ${props =>
props.theme.fonts.uiSubContent.family};
font-size: ${props =>
props.theme.fonts.uiSubContent.size};
font-weight: ${props =>
props.theme.fonts.uiSubContent.weight};
line-height: ${props =>
props.theme.fonts.uiSubContent.lineHeight};
&:not(:last-of-type) {
margin-bottom: 4px;
}
`;
export const Image = styled.img`
width: 150px;
height: 92px;
position: absolute;
left: 29px;
top: 14px;
`;
我正在尝试在 reactjs 中构建卡片。我通常坚持使用 scss,但是不能将 props 与 scss 一起使用,稍后我将不得不使用它来动态生成组件。不确定这里有什么问题,因为我确实导出了 Button。请有人可以提供一些见解,您会看到导致此错误的明显错误。
解决方案
在这种情况下,您export default
首先要编写代码,如果您要从同一个文件中导出多个内容,则应坚持单独导出每个 const/函数,并且没有任何导出默认值
如果您使用的是 ReactJS/NextJS,我真的建议您创建一个您通常使用应用程序编写和导入的全局主题,这样您就可以拥有类似的东西
// global.js
const GlobalStyle = createGlobalStyle`
* {
box-sizing: border-box;
}
:root {
--black: rgba(0,0,0,1);
--brandPrimary: rgba(238,120,36,1);
...
...
`
}
看看这里,它应该对你有很大帮助。
推荐阅读
- python - 使用 KIVY 弹出窗口我有 NameError
- node.js - Express 服务器为尚未定义的路由返回 200
- python - 如何使用熊猫应用具有条件的不同样式
- database - 在 SOA_Infra 数据库的哪个表中可以找到复合传感器数据?
- c# - 如何解析 JProperty 以使用变量键检索嵌套值
- jquery - 如何使用 jquery 创建动态选择字段?
- html - 防止内联svg点击附近的文本选择
- reactjs - 无法专注于 Formik 中的第一个错误输入
- php - 网站会话的 PHP isset 函数无法正常工作
- python - 如何使用python同步音频和视频