樣式組件不導出

Question

錯誤：./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。 請有人能提供一些見解，你看看是什么公然錯誤導致了這個錯誤。

Answer 1

在這種情況下，您將export default作為代碼的第一件事，如果您從同一個文件中導出多個內容，您應該堅持單獨導出每個常量/函數，並且沒有任何導出默認值

如果您使用的是 ReactJS/NextJS，我真的建議您創建一個您通常使用應用程序編寫和導入的全局主題，這樣您就可以擁有諸如

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

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

  ...
`
}

看看這里，它應該對你有很大幫助。