Unable to style an existing component

[shehan11]

Hello,
I’m creating a custom package/theme and I’m unable to get a component to be styled using the format:

const StyledLink = styled(Link)`
      text-decoration: none;
      font-size: 32px;
 `;

I have a link component that works fine when using it like <Link href='/'>This is a link</Link>

I am trying to add a StyledLink Component that will use Link, but just add css styles.

I can see that StyledLink appears in the source code in a stylesheet available to use, but it doesn’t get connected to the actual Link component in any way so the styles do not appear.

The styling appears in the source code like this:

<styledata-emotion-css="6m74xn-StyledLink">
.css-6m74xn-StyledLink{
-webkit-text-decoration:none;
text-decoration:none;
font-size:32px;
}</style>

But no element receives the class css-6m74xn-StyledLink so nothing is actually styled.

The StyledLink appears as if it was just a regular Link.

This is the entire file:

import React from "react";
import { connect, styled } from "frontity";
import Link from "./link";

const Header = () => {
	return (
	  <>
		<Container>
		  <StyledLink href="/">
			This is a styled link
		  </StyledLink>
		  <Link href='/'>This is an unstyled link</Link>
		</Container>
	  </>
	);
  };

export default connect(Header);

const Container = styled.div`
  width: 848px;
  max-width: 100%;
  box-sizing: border-box;
  padding: 24px;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
`;


const StyledLink = styled(Link)`
  text-decoration: none;
  font-size: 32px;
`;

The Container component is styled exactly as you would expect. Only the StyledLink component isn’t.

Thanks for your help!

[juanma]

Hi @shehan11,

Can you please provide a repo or code-sandbox with your code? This is especially helpful to find solutions of technical issues with specific code