Styled Components Naming Convention

I was messing around with styled-components in React, and I was struck by how awful the standard naming convention is:

import styled from "styled-components";

const StyledCard = styled.div`...`;
const StyledImage = styled.img`...`;
const StyledDescription = styled.div`...`;
const StyledCTA = styled.a`...`;

export const Card = () => (
  <StyledCard>
    <StyledImage />
    <StyledDescription />
    <StyledCTA />
  </StyledCard>
);

Since these sub-components are all scoped to this component, my inclination is to name them as they are:

const Card = styled.div`...`;
const Image = styled.img`...`;
const Description = styled.div`...`;
const CTA = styled.a`...`;

However this won't work as the Card styled component can't share the same name as the Card exported compound component.

export const Card = () => (
  <Card /> // yo dawg, I heard you like cards
);

I did a small amount of searching for better styled-components naming conventions, and came across an article that suggested namespaces.

export const Card = () => (
  <S.Card>
    <S.Image />
    <S.Description />
    <S.CTA />
  </S.Card>
);

I'm not overly sold on namespaces as they come with trade-offs that can make them awkward to set up properly...

...but it did remind me a bit of classic jQuery syntax.

And since we're in the React world of scoped modules with no need of jQuery it gave me the idea to repurpose $ for styled components:

import $ from "styled-components";

const $Card = $.div`...`;
const $Image = $.img`...`;
const $Description = $.div`...`;
const $CTA = $.a`...`;

export const Card = () => (
  <$Card>
    <$Image />
    <$Description />
    <$CTA />
  </$Card>
);

Honestly, I kinda like it. It helps to differentiate the internally scoped components from externally scoped components, and apart from needing to remind people that $ is not jQuery I don't see any significant issues. Even nicer is the "S" in the dollar sign can actually symbolically represent "Styled".