Emotion styled not overiding component

Question

I am making a site with next.js and @emotion/styled.

I have a card component as below.

import React from 'react';
import styled from '@emotion/styled';

    const Card: React.FC = (props) => {
      return (
          <Container>{props.children}</Container>
      );
    };
    export default Card;
    
    const Container = styled.div`
      padding:36px;
    `

and I want to override the style and add a border to it.

import Card from '@/components/atoms/products/Card'
import styled from '@emotion/styled';
const Test: React.FC = () =>{
  return(<BorderedCard/>)
}
export default Test


const BorderedCard = styled(Card)`
  height:300px:
  border: solid 1px #244C95;
`

I import the card component and override it. I expected the card component to have a border, but the style did not apply for the component. This method works everywhere else in the project, but not for this component.

I suspected that somehow this component cannot be found, and checked the ts config file.

  "include": [
    "next-env.d.ts",
    "src/**/*",
    "emotion.d.ts"
  ],

Then I tried to change the directories of the files, but no change.

Anyone know why this overriding style is not working?

Any help would be appreciated.

Answer 1

Your Card component needs to have a className prop and pass it to your Container component. It's a requirement for emotion styled function to work: https://emotion.sh/docs/styled#styling-any-component.

const Card: React.FC = (props) => {
      return (
          <Container className={props.className}>{props.children}</Container>
      );
};