Styled Component import not being read or used

Question

I'm having an issue with an import but I cannot for the life of me figure out.

import styled from 'styled-components'

const cardHeader = styled.header`
    background-color: #5A4134;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
`

export default { cardHeader };

Above is my styled component that I have in src/CSS/cardflip and I am trying to use it below:

import React, { useState } from "react";
import ReactCardFlip from 'react-card-flip';
import bannerFront from '../Images/Banner.png';
import bannerBack from '../Images/Banner-back.png';
import { cardHeader, logo } from '../CSS/cardflip';

function CardFlipMain() {

  var [ isFlipped, setIsFlipped ] = useState(false);

  var flipCardClick = function() {
    setIsFlipped(!isFlipped);
  };

  // <header className="App-header">

  return (
    <cardHeader>
        <ReactCardFlip isFlipped={isFlipped} id="flip-card-container" flipDirection="horizontal">
            <div onClick={flipCardClick} className="flip-card">
              <img src={bannerFront} id="logo-card" className="App-logo" alt="logo" />
            </div>

            <div onClick={flipCardClick} className="flip-card">
              <img src={bannerBack} id="logo-card" className="App-logo" alt="logo" />
            </div>
        </ReactCardFlip>
    </cardHeader>
  )
}

export default CardFlipMain

For some reason I keep getting a "never read/value never used for my cardHeader styled component despite importing/exporting correctly.

Answer 1

React's components have naming convention which starts with a capital letter, so you should change your component name from cardHeader to CardHeader. You also should use export on CardHeader instead of export default.

import styled from 'styled-components'

export const CardHeader = styled.header`
    background-color: #5A4134;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
`

//don't need it
//export default { CardHeader };

Use it like other components

import React, { useState } from "react";
import ReactCardFlip from 'react-card-flip';
import bannerFront from '../Images/Banner.png';
import bannerBack from '../Images/Banner-back.png';
//logo is not exported from here, so I removed it
import { CardHeader } from '../CSS/cardflip';

function CardFlipMain() {

  var [ isFlipped, setIsFlipped ] = useState(false);

  var flipCardClick = function() {
    setIsFlipped(!isFlipped);
  };

  // <header className="App-header">

  return (
    <CardHeader>
        <ReactCardFlip isFlipped={isFlipped} id="flip-card-container" flipDirection="horizontal">
            <div onClick={flipCardClick} className="flip-card">
              <img src={bannerFront} id="logo-card" className="App-logo" alt="logo" />
            </div>

            <div onClick={flipCardClick} className="flip-card">
              <img src={bannerBack} id="logo-card" className="App-logo" alt="logo" />
            </div>
        </ReactCardFlip>
    </CardHeader>
  )
}

export default CardFlipMain