Issue adding styles to <Link>

🙋Get Help
1

I have exactly this issue.

Git

It is with the following two components:
<HeaderMenu /> - building upon <Menu />
<HeaderSocialLinks /> - building upon <SocialLinks />

<Menu /> and <SocialLinks /> aren’t styled, they are added in the prefix Header versions. However, the styles don’t appear to work.

Any help would be appreciated.

Its all my first time trying to use Git, so apologies if I’ve not done it correctly!

3

Hey @jamieinpreston ! :wave:

The problem is that your Menu and SocialLinks should both accept a className prop and pass it to some component that they render. For example:

const SocialLinks = ({ state, className }) => (
        <div>
            {state.theme.social.map(([title, type, link], index) => (
                <Link key={index} link={link} title={title} className={className}>
                    <Icon icon={type} size="1.5" />
                </Link>
            ))}
        </div>
    )

Frontity uses a library called Emotion to handle styling, as you might know. Emotion creates the CSS class names and will automatically pass the classNames prop for you. But if you are styling some existing component, Emotion needs to “know” where to pass that className prop!

Here’s the relevant bit in the docs: https://emotion.sh/docs/styled#styling-any-component

Hope this helps!

2 Likes
4

Brilliant, thanks for the thorough and helpful response.