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!
Hey @jamieinpreston !
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
Brilliant, thanks for the thorough and helpful response.