样式组件不导出答案

【问题标题】：Styled-components not exporting样式组件不导出
【发布时间】：2021-09-12 23:55:10
【问题描述】：

错误： ./src/card.js 尝试导入错误：“底部”未从“./styles/cards.style”导出。

card.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。请有人可以提供一些见解，您可以看到导致此错误的明显错误。

【问题讨论】：

标签： javascript html css reactjs styled-components

【解决方案1】：

在这种情况下，您的代码的第一件事是 export default，如果您要从同一个文件中导出多个内容，您应该坚持单独导出每个 const/function，并且没有任何导出默认值

如果您使用的是 ReactJS/NextJS，我真的建议您创建一个您通常使用应用程序编写和导入的全局主题，这样您就可以拥有类似的东西

// global.js
const GlobalStyle = createGlobalStyle`
  * {
    box-sizing: border-box;
  }

  :root {
    --black: rgba(0,0,0,1);
    --brandPrimary: rgba(238,120,36,1);
    ...

  ...
`
}

看看here，应该对你有很大帮助。

【讨论】：