Styled-components not exporting

Question

Error: ./src/card.js Attempted import error: 'Bottom' is not exported from './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;

cards.style

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;
`;

I am trying to build cards in reactjs. I usually stick to scss however cannot use props with scss which I will have to use later to dynamically generate components. Not sure what is wrong here as I did export Button. Please can someone shed some insight you see what is so blatantly wrong it is causing this error.

Answer 1

in that case you have an export default as the first thing of you code, if you are exporting more than one thing from the same file, you should stick to exporting each const/function by itself and not having any export default

If you are using ReactJS/NextJS I would really recommend creating a global theme that you normally write and import with the application, so you could have things like

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

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

  ...
`
}

Take a look here , it should help you a lot.