Unable to style Link components with styletron

[ghost]

I'm having trouble styling Link components. If you nest an anchor element or anchor component, Fusion will create another anchor instead of rendering one anchor. If you pass the Link component into styletron's withStyle, Fusion crashes.

Is there a way to style Links with styletron? I'd prefer to avoid using inline style and nesting a random element for the purposes of styling.

[rtsao]

You can do this two ways:

import {styled} from "styletron-react";
const StyledLink = styled(Link, /* ... */);

<StyledLink>Hello world</StyledLink>

or:

import {styled} from "styletron-react";
const StyledAnchor = styled("a", /* ... */);

<StyledAnchor $as={Link}>Hello world</StyledAnchor>

The styled function creates a styled element component from a tag name or arbitrary component React component.

Compositional functions (such as withStyle, withTransform, etc.) create new styled element components by composing new styling logic with existing styled element components.

[ghost]

Solid! This worked great! Thanks @rtsao!